@grantcodes/ui 2.0.0-beta4 → 2.0.0

package/src/components/form-field/form-field.test.js

@@ -0,0 +1,118 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./form-field.js";
+
+describe("Form Field Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-form-field");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should display label text", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Username",
+		});
+
+		const labelElement = element.shadowRoot.querySelector(".form-field__label");
+		assert.ok(labelElement, "Label element should exist");
+		assert.strictEqual(labelElement.textContent, "Username", "Label text should match");
+	});
+
+	it("should display error message when error is set", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Email",
+			error: "Invalid email format",
+		});
+
+		const errorElement = element.shadowRoot.querySelector(".form-field__error");
+		assert.ok(errorElement, "Error element should exist");
+		assert.ok(
+			errorElement.textContent.includes("Invalid email format"),
+			"Error message should be displayed",
+		);
+	});
+
+	it("should not display error when no error is set", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Email",
+		});
+
+		const errorElement = element.shadowRoot.querySelector(".form-field__error");
+		assert.ok(!errorElement, "Error element should not exist");
+	});
+
+	it("should display help text when help is provided", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Password",
+			help: "Must be at least 8 characters",
+		});
+
+		const helpElement = element.shadowRoot.querySelector(".form-field__help");
+		assert.ok(helpElement, "Help element should exist");
+		assert.strictEqual(
+			helpElement.textContent,
+			"Must be at least 8 characters",
+			"Help text should match",
+		);
+	});
+
+	it("should not display help when no help is provided", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Password",
+		});
+
+		const helpElement = element.shadowRoot.querySelector(".form-field__help");
+		assert.ok(!helpElement, "Help element should not exist when help is not provided");
+	});
+
+	it("should generate unique IDs", async () => {
+		const element1 = await fixture("grantcodes-form-field");
+		const element2 = await fixture("grantcodes-form-field");
+
+		assert.notStrictEqual(element1.id, element2.id, "IDs should be unique");
+
+		cleanup(element1);
+		cleanup(element2);
+	});
+
+	it("should have label element", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Test Field",
+		});
+
+		const label = element.shadowRoot.querySelector("label");
+		assert.ok(label, "Label element should exist");
+	});
+
+	it("should render as fieldset for grouped inputs", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Select options",
+		});
+
+		// Add nested form fields to trigger group mode
+		const nestedField = document.createElement("grantcodes-form-field");
+		element.appendChild(nestedField);
+
+		await element.updateComplete;
+		// This would need to check if groupInput was set, which happens in firstUpdated
+	});
+
+	it("should have slot for input elements", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Input",
+		});
+
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for input elements");
+	});
+});
+
+

package/src/components/form-field/index.js

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

package/src/components/gallery/gallery-image.component.js

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { galleryStyles } from "./gallery.styles.js";
+
+export class GrantCodesGalleryImage extends LitElement {
+	static styles = [galleryStyles];
+
+	static properties = {
+		width: { type: Number },
+		height: { type: Number },
+		src: { type: String },
+		alt: { type: String },
+		caption: { type: String },
+		thumbnail: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		this.width = 0;
+		this.height = 0;
+		this.src = "";
+		this.alt = "";
+		this.caption = "";
+		this.thumbnail = "";
+	}
+
+	captionTemplate() {
+		if (!this.caption) {
+			return html``;
+		}
+
+		return html`
+      <figcaption class="gallery__image__caption">${this.caption}</figcaption>
+    `;
+	}
+
+	render() {
+		return html`
+      <figure class="gallery__image">
+        <img
+          width=${this.width}
+          height=${this.height}
+          src=${this.src}
+          alt=${this.alt}
+          loading="lazy"
+        />
+        ${this.captionTemplate()}
+      </figure>
+    `;
+	}
+}

package/src/components/gallery/gallery-image.js

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

package/src/components/gallery/gallery.component.js

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { galleryStyles } from "./gallery.styles.js";
+
+export class GrantCodesGallery 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 = [galleryStyles];
+
+	/** @type {any[]} */
+	images = [];
+
+	// Define reactive properties--updating a reactive property causes
+	// the component to update.
+	// @property() label = 'Button Label'
+
+	render() {
+		return html`
+      <div class="gallery">
+        <slot class="gallery__slot"></slot>
+      </div>
+    `;
+	}
+}

package/src/components/gallery/gallery.js

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

package/src/components/gallery/gallery.stories.js

@@ -0,0 +1,60 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-gallery");
+import "./gallery.js";
+import "./gallery-image.js";
+
+function getRandomSize() {
+	return Math.floor(Math.random() * (800 - 100 + 1) + 100);
+}
+
+const getTestImage = () => {
+	const width = getRandomSize();
+	const height = getRandomSize();
+
+	return {
+		src: `https://picsum.photos/${width}/${height}`,
+		alt: "Image",
+		width,
+		height,
+	};
+};
+
+const testImages = [];
+for (let i = 0; i < 12; i++) {
+	testImages.push(getTestImage());
+}
+
+const meta = {
+	title: "Components/Gallery",
+	component: "grantcodes-gallery",
+	args: {
+		...args,
+		caption: "This is a test caption",
+	},
+	argTypes,
+	render: (args) =>
+		template(
+			args,
+			html`${testImages.map(
+				({ src, alt, width, height }) =>
+					html`<grantcodes-gallery-image
+						src=${src}
+						alt=${alt}
+						width=${width}
+						height=${height}
+						caption=${args.caption}
+					></grantcodes-gallery-image>`,
+			)}`,
+		),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Gallery = {};

package/src/components/gallery/gallery.styles.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+
+export const galleryStyles = css`
+
+.gallery {
+  display: block;
+}
+
+.gallery__slot {
+  display: grid;
+  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--gallery-gap, 0);
+}
+
+.gallery__slot > * {
+  display: block;
+  width: 100%;
+}
+
+.gallery--has-lightbox > * {
+  cursor: pointer;
+}
+
+.gallery__image {
+  position: relative;
+  width: 100%;
+  display: block;
+  flex-direction: column;
+  margin: 0;
+}
+
+.gallery__image img {
+  display: block;
+  width: 100%;
+  height: auto;
+  /* Make the image square */
+  aspect-ratio: 1;
+  object-fit: cover;
+  object-position: center;
+}
+
+.gallery__image__caption {
+  position: absolute;
+  inset: 0;
+  inset-block-start: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding-inline: 0.5em;
+  padding-block: 0.3em;
+  line-height: 1.2;
+  color: white;
+}
+
+`;

package/src/components/gallery/gallery.test.js

@@ -0,0 +1,58 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./gallery.js";
+
+describe("Gallery Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-gallery");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should render gallery wrapper", async () => {
+		element = await fixture("grantcodes-gallery");
+		const gallery = element.shadowRoot.querySelector(".gallery");
+		assert.ok(gallery, "Gallery element should exist");
+	});
+
+	it("should have slot for gallery items", async () => {
+		element = await fixture("grantcodes-gallery");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist");
+		assert.ok(
+			slot.classList.contains("gallery__slot"),
+			"Slot should have gallery__slot class",
+		);
+	});
+
+	it("should support multiple image slots", async () => {
+		element = await fixture("grantcodes-gallery");
+
+		const img1 = document.createElement("img");
+		img1.src = "image1.jpg";
+		const img2 = document.createElement("img");
+		img2.src = "image2.jpg";
+
+		element.appendChild(img1);
+		element.appendChild(img2);
+
+		await element.updateComplete;
+
+		assert.strictEqual(element.children.length, 2, "Should have two images");
+	});
+
+	it("should initialize images array", async () => {
+		element = await fixture("grantcodes-gallery");
+		assert.ok(Array.isArray(element.images), "Images should be an array");
+		assert.strictEqual(element.images.length, 0, "Images array should be empty initially");
+	});
+});
+
+

package/src/components/gallery/index.js

@@ -0,0 +1,2 @@
+export * from "./gallery";
+export * from "./gallery-image";

package/src/components/icon/icon.component.js

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { iconStyles } from "./icon.styles.js";
+
+export class GrantCodesIcon 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 = [iconStyles];
+
+	render() {
+		return html`<span class="icon"><slot></slot></span>`;
+	}
+}

package/src/components/icon/icon.js

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

package/src/components/icon/icon.stories.js

@@ -0,0 +1,26 @@
+import { html } from "lit/static-html.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "./icon.js";
+import { ArrowRight, Heart, Star, CheckCircle2 } from "../../icons.js";
+
+const meta = {
+	title: "Components/Icon",
+	component: "grantcodes-icon",
+};
+
+export default meta;
+
+export const Icon = {
+	render: () => html`<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>`,
+};
+
+export const MultipleIcons = {
+	render: () => html`
+		<div style="display: flex; gap: 1rem;">
+			<grantcodes-icon>${unsafeHTML(Heart)}</grantcodes-icon>
+			<grantcodes-icon>${unsafeHTML(Star)}</grantcodes-icon>
+			<grantcodes-icon>${unsafeHTML(CheckCircle2)}</grantcodes-icon>
+			<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>
+		</div>
+	`,
+};

package/src/components/icon/icon.styles.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+
+export const iconStyles = css`
+
+.icon {
+  display: inline-block;
+  color: inherit;
+  width: 1em;
+  height: 1em;
+}
+
+.icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+.icon svg:not([fill]) {
+  fill: currentColor;
+}
+
+.icon svg:not([stoke]) {
+  stroke: currentColor;
+}
+
+`;

package/src/components/icon/icon.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 "./icon.js";
+
+describe("Icon Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-icon");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have icon wrapper span", async () => {
+		element = await fixture("grantcodes-icon");
+		const iconSpan = element.shadowRoot.querySelector(".icon");
+		assert.ok(iconSpan, "Icon span should exist");
+	});
+
+	it("should have slot for SVG content", async () => {
+		element = await fixture("grantcodes-icon");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist");
+	});
+
+	it("should render slotted SVG content", async () => {
+		element = await fixture("grantcodes-icon");
+		const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		svg.setAttribute("width", "24");
+		svg.setAttribute("height", "24");
+		element.appendChild(svg);
+
+		await element.updateComplete;
+
+		const slottedSvg = element.querySelector("svg");
+		assert.ok(slottedSvg, "SVG should be slotted");
+		assert.strictEqual(slottedSvg.getAttribute("width"), "24");
+	});
+
+	it("should accept any SVG as slot content", async () => {
+		element = await fixture("grantcodes-icon");
+		element.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
+
+		await element.updateComplete;
+
+		const svg = element.querySelector("svg");
+		assert.ok(svg, "SVG should be present");
+		assert.ok(svg.querySelector("circle"), "SVG content should be preserved");
+	});
+});
+
+

package/src/components/icon/index.js

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

package/src/components/loading/index.js

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

package/src/components/loading/loading.component.js

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { loadingStyles } from "./loading.styles.js";
+
+export class GrantCodesLoading 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 = [loadingStyles];
+
+	// Define reactive properties--updating a reactive property causes
+	// the component to update.
+
+	render() {
+		return html`
+      <span class="loading">
+        <slot></slot>
+      </span>
+    `;
+	}
+}

package/src/components/loading/loading.js

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

package/src/components/loading/loading.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-loading");
+import "./loading.js";
+
+const meta = {
+	title: "Components/Loading",
+	component: "grantcodes-loading",
+	args: {
+		...args,
+		text: "Loading...",
+	},
+	argTypes,
+	render: (args) => template(args, html`${args.text}`),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Loading = {};

package/src/components/loading/loading.styles.js

@@ -0,0 +1,43 @@
+import { css } from "lit";
+
+export const loadingStyles = css`
+
+:host {
+  --height: 0.5rem;
+  --inner-width: 40%;
+  --starting-position: calc(0% - (var(--inner-width) * 2));
+  --ending-position: calc(100% + (var(--inner-width) * 2));
+}
+
+.loading {
+  display: block;
+  height: var(--height);
+  border-radius: calc(var(--height) / 2);
+  overflow: hidden;
+  padding-top: var(--height);
+  background-repeat: no-repeat;
+  background-color: var(--g-color-brand-purple-500);
+  background-image: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--g-color-neutral-500) 10%,
+    var(--g-color-neutral-500) 90%,
+    transparent 100%
+  );
+  background-size: var(--inner-width) 100%;
+  background-position-x: var(--starting-position);
+  animation: loading 2s linear infinite;
+  /* This is probably a bad way of hiding the text */
+  font-size: 0;
+}
+
+@keyframes loading {
+  0% {
+    background-position-x: var(--starting-position);
+  }
+  100% {
+    background-position-x: var(--ending-position);
+  }
+}
+
+`;