@grantcodes/ui 2.0.0-beta4 → 2.0.0

package/src/components/loading/loading.test.js

@@ -0,0 +1,57 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./loading.js";
+
+describe("Loading Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-loading");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have loading wrapper span", async () => {
+		element = await fixture("grantcodes-loading");
+		const loadingSpan = element.shadowRoot.querySelector(".loading");
+		assert.ok(loadingSpan, "Loading span should exist");
+	});
+
+	it("should have slot for content", async () => {
+		element = await fixture("grantcodes-loading");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist");
+	});
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-loading");
+		element.textContent = "Loading...";
+
+		await element.updateComplete;
+
+		assert.strictEqual(
+			element.textContent,
+			"Loading...",
+			"Slotted text should be present",
+		);
+	});
+
+	it("should support custom loading indicators", async () => {
+		element = await fixture("grantcodes-loading");
+		const spinner = document.createElement("div");
+		spinner.className = "custom-spinner";
+		element.appendChild(spinner);
+
+		await element.updateComplete;
+
+		const customSpinner = element.querySelector(".custom-spinner");
+		assert.ok(customSpinner, "Custom spinner should be slotted");
+	});
+});
+
+

package/src/components/notice/index.js

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

package/src/components/notice/notice.component.js

@@ -0,0 +1,77 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { cx } from "../../lib/classnames.js";
+import { noticeStyles } from "./notice.styles.js";
+import { GrantCodesIcon } from "../icon/icon.component.js";
+import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
+
+const ICONS = {
+	info: Info,
+	success: CheckCircle2,
+	warning: AlertCircle,
+	error: XCircle,
+};
+
+export class GrantCodesNotice extends LitElement {
+	static dependencies = { "grancodes-icon": GrantCodesIcon };
+	// 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 = [noticeStyles];
+
+	// Define reactive properties--updating a reactive property causes
+	// the component to update.
+	// @property() label = 'Button Label'
+	static properties = {
+		variant: { type: String },
+		title: { type: String },
+		dismissable: { type: Boolean },
+	};
+
+	constructor() {
+		super();
+
+		this.variant = "info";
+		this.title = "";
+		this.dismissable = false;
+	}
+
+	onDismiss(_e) {
+		if (document.startViewTransition) {
+			document.startViewTransition(() => {
+				this.remove();
+			});
+		} else {
+			this.remove();
+		}
+	}
+
+	renderDismiss() {
+		if (this.dismissable) {
+			return html`
+				<button class="notice__close" @click=${this.onDismiss}>
+					<grantcodes-icon title="Close Notice">${unsafeHTML(X)}</grantcodes-icon>
+				</button>
+			`;
+		}
+		return html``;
+	}
+
+	render() {
+		const icon = ICONS[this.variant];
+
+		return html`
+			<aside class="${cx("notice", `notice--${this.variant}`)}">
+				<grantcodes-icon class="notice__icon">${unsafeHTML(icon)}</grantcodes-icon>
+
+				<div class="notice__content">
+					${this.title && html`<h2 class="notice__title">${this.title}</h2>`}
+					<p><slot></slot></p>
+				</div>
+
+				${this.renderDismiss()}
+			</aside>
+		`;
+	}
+}

package/src/components/notice/notice.js

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

package/src/components/notice/notice.stories.js

@@ -0,0 +1,122 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-notice");
+import "./notice.js";
+
+const meta = {
+	title: "Components/Notice",
+	component: "grantcodes-notice",
+	args: {
+		...args,
+		text: "This is the notice content",
+		title: "Notice title",
+		variant: "info",
+		dismissable: false,
+	},
+	argTypes: {
+		...argTypes,
+		variant: {
+			type: "string",
+		},
+	},
+	render: (args) => template(args, html`${args.text}`),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Informational notice with info variant and icon.
+ * Use for general information that doesn't require immediate action.
+ */
+export const InfoNotice = {};
+
+/**
+ * Success notice indicating a successful operation.
+ * Use after successful form submissions, saves, or completions.
+ */
+export const SuccessNotice = {
+	args: {
+		variant: "success",
+		title: "Success",
+		text: "Your changes have been saved successfully.",
+	},
+};
+
+/**
+ * Warning notice for non-critical issues.
+ * Use to alert users about potential problems that don't block their workflow.
+ */
+export const WarningNotice = {
+	args: {
+		variant: "warning",
+		title: "Warning",
+		text: "Your session will expire in 5 minutes.",
+	},
+};
+
+/**
+ * Error notice for critical issues.
+ * Use when an operation fails or there's a blocking error.
+ */
+export const ErrorNotice = {
+	args: {
+		variant: "error",
+		title: "Error",
+		text: "Failed to save changes. Please try again.",
+	},
+};
+
+/**
+ * Dismissable notice that can be closed by the user.
+ * The notice will be removed from the DOM when dismissed.
+ */
+export const Dismissable = {
+	args: {
+		variant: "info",
+		title: "Dismissable Notice",
+		text: "You can close this notice by clicking the X button.",
+		dismissable: true,
+	},
+};
+
+/**
+ * Notice without a title, showing only the message.
+ */
+export const NoTitle = {
+	args: {
+		variant: "info",
+		title: "",
+		text: "This is a notice without a title, just the content message.",
+	},
+};
+
+/**
+ * All notice variants displayed together for comparison.
+ */
+export const AllVariants = {
+	render: () => html`
+		<div style="display: flex; flex-direction: column; gap: 1rem;">
+			<grantcodes-notice variant="info" title="Information">
+				This is an informational message for general updates.
+			</grantcodes-notice>
+			<grantcodes-notice variant="success" title="Success">
+				Operation completed successfully!
+			</grantcodes-notice>
+			<grantcodes-notice variant="warning" title="Warning">
+				Please review this warning before continuing.
+			</grantcodes-notice>
+			<grantcodes-notice variant="error" title="Error">
+				An error occurred. Please contact support.
+			</grantcodes-notice>
+			<grantcodes-notice variant="info" dismissable>
+				This notice can be dismissed by clicking the close button.
+			</grantcodes-notice>
+		</div>
+	`,
+};

package/src/components/notice/notice.styles.js

@@ -0,0 +1,72 @@
+import { css } from "lit";
+
+export const noticeStyles = css`
+
+.notice {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  view-transition-name: notice;
+  transition: opacity 0.5s;
+}
+
+.notice--info {
+  color: var(--g-color-utility-blue-900);
+  background-color: var(--g-color-utility-blue-100);
+}
+
+.notice--success {
+  color: var(--g-color-utility-green-900);
+  background-color: var(--g-color-utility-green-100);
+}
+
+.notice--warning {
+  color: var(--g-color-utility-yellow-900);
+  background-color: var(--g-color-utility-yellow-100);
+}
+
+.notice--error {
+  color: var(--g-color-utility-red-900);
+  background-color: var(--g-color-utility-red-100);
+}
+
+.notice__title {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.notice__icon {
+  font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+}
+
+.notice__content {
+  flex-grow: 1;
+}
+
+.notice__close {
+  background: none;
+  color: inherit;
+  opacity: 0.5;
+  transition: 0.2s;
+  font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+  line-height: 1;
+  padding: 0.5rem;
+  margin: -0.5rem -0.5rem 0 0;
+  border: 0;
+
+  &:hover,
+  &:focus-visible {
+    background: none;
+    color: inherit;
+    opacity: 1;
+  }
+}
+
+.notice p {
+  margin: 0;
+}
+
+`;

package/src/components/notice/notice.test.js

@@ -0,0 +1,146 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./notice.js";
+
+describe("Notice Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-notice");
+		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-notice");
+		assert.strictEqual(element.variant, "info", "Default variant should be info");
+	});
+
+	it("should render with info variant class", async () => {
+		element = await fixture("grantcodes-notice", {
+			variant: "info",
+		});
+
+		const notice = element.shadowRoot.querySelector(".notice--info");
+		assert.ok(notice, "Notice should have info class");
+	});
+
+	it("should render with success variant class", async () => {
+		element = await fixture("grantcodes-notice", {
+			variant: "success",
+		});
+
+		const notice = element.shadowRoot.querySelector(".notice--success");
+		assert.ok(notice, "Notice should have success class");
+	});
+
+	it("should render with warning variant class", async () => {
+		element = await fixture("grantcodes-notice", {
+			variant: "warning",
+		});
+
+		const notice = element.shadowRoot.querySelector(".notice--warning");
+		assert.ok(notice, "Notice should have warning class");
+	});
+
+	it("should render with error variant class", async () => {
+		element = await fixture("grantcodes-notice", {
+			variant: "error",
+		});
+
+		const notice = element.shadowRoot.querySelector(".notice--error");
+		assert.ok(notice, "Notice should have error class");
+	});
+
+	it("should display title when provided", async () => {
+		element = await fixture("grantcodes-notice", {
+			title: "Important Notice",
+		});
+
+		const title = element.shadowRoot.querySelector(".notice__title");
+		assert.ok(title, "Title element should exist");
+		assert.strictEqual(title.textContent, "Important Notice", "Title text should match");
+	});
+
+	it("should not display title when not provided", async () => {
+		element = await fixture("grantcodes-notice");
+
+		const title = element.shadowRoot.querySelector(".notice__title");
+		assert.ok(!title, "Title element should not exist");
+	});
+
+	it("should not be dismissable by default", async () => {
+		element = await fixture("grantcodes-notice");
+		assert.strictEqual(element.dismissable, false, "Should not be dismissable by default");
+	});
+
+	it("should render dismiss button when dismissable", async () => {
+		element = await fixture("grantcodes-notice", {
+			dismissable: true,
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".notice__close");
+		assert.ok(closeButton, "Close button should exist");
+	});
+
+	it("should not render dismiss button when not dismissable", async () => {
+		element = await fixture("grantcodes-notice", {
+			dismissable: false,
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".notice__close");
+		assert.ok(!closeButton, "Close button should not exist");
+	});
+
+	it("should render appropriate icon for variant", async () => {
+		element = await fixture("grantcodes-notice", {
+			variant: "success",
+		});
+
+		const icon = element.shadowRoot.querySelector(".notice__icon");
+		assert.ok(icon, "Icon should be present");
+	});
+
+	it("should have content slot", async () => {
+		element = await fixture("grantcodes-notice");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for content");
+	});
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-notice");
+		element.textContent = "This is a notice message";
+
+		await element.updateComplete;
+
+		assert.strictEqual(
+			element.textContent,
+			"This is a notice message",
+			"Slotted content should be present",
+		);
+	});
+
+	it("should remove element when dismissed", async () => {
+		element = await fixture("grantcodes-notice", {
+			dismissable: true,
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".notice__close");
+		const parentBeforeDismiss = element.parentNode;
+
+		assert.ok(parentBeforeDismiss, "Element should have a parent");
+
+		// Note: In actual tests, the element removal via view transitions might need special handling
+		click(closeButton);
+
+		// Give time for the dismiss handler to execute
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	});
+});
+
+

package/src/components/pagination/index.js

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

package/src/components/pagination/pagination.component.js

@@ -0,0 +1,62 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { paginationStyles } from "./pagination.styles.js";
+import { GrantCodesButton } from "../button/button.component.js";
+import "../button/button.js";
+
+export class GrantCodesPagination 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 = [paginationStyles];
+
+	static dependencies = { "grantcodes-button": GrantCodesButton };
+
+	static properties = {
+		previousHref: { attribute: "previous-href" },
+		nextHref: { attribute: "next-href" },
+		page: { type: Number },
+		pages: { type: Number },
+	};
+
+	constructor() {
+		super();
+
+		this.previousHref = "";
+		this.nextHref = "";
+		this.page = 1;
+		this.pages = 1;
+	}
+
+	nextTemplate() {
+		if (!this.nextHref) {
+			return html``;
+		}
+
+		return html`
+      <grantcodes-button class="pagination__next" href=${this.nextHref}
+        >Next</grantcodes-button
+      >
+    `;
+	}
+
+	previousTemplate() {
+		if (!this.previousHref) {
+			return html``;
+		}
+
+		return html`
+      <grantcodes-button class="pagination__previous" href=${this.previousHref}
+        >Previous</grantcodes-button
+      >
+    `;
+	}
+
+	render() {
+		return html`
+      <nav class="pagination" aria-label="Pagination navigation">
+        ${this.previousTemplate()} ${this.nextTemplate()}
+      </nav>
+    `;
+	}
+}

package/src/components/pagination/pagination.js

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

package/src/components/pagination/pagination.stories.js

@@ -0,0 +1,34 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes } = getStorybookHelpers(
+	"grantcodes-pagination",
+);
+import "./pagination.js";
+
+const meta = {
+	title: "Components/Pagination",
+	component: "grantcodes-pagination",
+	args: {
+		...args,
+		previousHref: "#1",
+		nextHref: "#3",
+	},
+	argTypes,
+	render: (args) => html`
+			<grantcodes-pagination
+				.previousHref=${args.previousHref}
+				.nextHref=${args.nextHref}
+				.page=${args.page ?? 1}
+				.pages=${args.pages ?? 1}
+			></grantcodes-pagination>
+		`,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Pagination = {};

package/src/components/pagination/pagination.styles.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+
+export const paginationStyles = css`
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.pagination__next {
+  margin-inline-start: auto;
+}
+
+.pagination__previous {
+  margin-inline-end: auto;
+}
+
+`;