@grantcodes/ui 2.0.0-beta.9 → 2.0.0

package/src/components/footer/footer.stories.js

@@ -0,0 +1,143 @@
+import { html } from "lit";
+import "./footer.js";
+
+const meta = {
+	title: "Components/Footer",
+	component: "grantcodes-footer",
+};
+
+export default meta;
+
+const columns = html`
+	<grantcodes-footer-column>
+		<h3>Company</h3>
+		<ul>
+			<li><a href="/about">About Us</a></li>
+			<li><a href="/team">Team</a></li>
+			<li><a href="/careers">Careers</a></li>
+			<li><a href="/press">Press</a></li>
+		</ul>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Product</h3>
+		<ul>
+			<li><a href="/features">Features</a></li>
+			<li><a href="/pricing">Pricing</a></li>
+			<li><a href="/docs">Documentation</a></li>
+			<li><a href="/api">API</a></li>
+		</ul>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Support</h3>
+		<ul>
+			<li><a href="/help">Help Center</a></li>
+			<li><a href="/contact">Contact</a></li>
+			<li><a href="/status">Status</a></li>
+			<li><a href="/security">Security</a></li>
+		</ul>
+	</grantcodes-footer-column>
+`;
+
+/**
+ * Basic footer with three columns
+ */
+export const Footer = {
+	render: () => html`
+		<grantcodes-footer>
+			${columns}
+
+			<div slot="bottom">
+				<p>&copy; 2024 MyCompany. All rights reserved.</p>
+			</div>
+		</grantcodes-footer>
+	`,
+};
+
+/**
+ * Footer with four columns
+ */
+export const FourColumns = {
+	render: () => html`
+		<grantcodes-footer columns="4">
+			${columns}
+
+			<div slot="bottom">
+				<p>&copy; 2024 Company Name</p>
+			</div>
+			<div slot="bottom" style="display: flex; gap: 1rem;">
+				<a href="/twitter">Twitter</a>
+				<a href="/github">GitHub</a>
+				<a href="/linkedin">LinkedIn</a>
+			</div>
+		</grantcodes-footer>
+	`,
+};
+
+/**
+ * Footer with social links in bottom section
+ */
+export const WithSocialLinks = {
+	render: () => html`
+		<grantcodes-footer>
+			${columns}
+
+			<div slot="bottom" style="display: flex; gap: 0.5rem; align-items: center;">
+				<span>&copy; 2024 MyApp</span>
+				<span>•</span>
+				<a href="/privacy">Privacy</a>
+				<span>•</span>
+				<a href="/terms">Terms</a>
+			</div>
+
+			<!-- <div slot="bottom" style="display: flex; gap: 1rem; font-size: 1.5rem;">
+				<a href="https://twitter.com">🐦</a>
+				<a href="https://github.com">🐙</a>
+				<a href="https://linkedin.com">💼</a>
+				<a href="https://discord.com">💬</a>
+			</div> -->
+		</grantcodes-footer>
+	`,
+};
+
+/**
+ * Simple footer with minimal content
+ */
+export const Minimal = {
+	render: () => html`
+		<grantcodes-footer columns="1">
+			<grantcodes-footer-column>
+				<p style="text-align: center;">&copy; 2024 MyCompany. All rights reserved.</p>
+				<ul style="justify-content: center;">
+					<li><a href="/privacy">Privacy Policy</a></li>
+					<li><a href="/terms">Terms of Service</a></li>
+					<li><a href="/contact">Contact</a></li>
+				</ul>
+			</grantcodes-footer-column>
+		</grantcodes-footer>
+	`,
+};
+
+/**
+ * Footer with rich content including description
+ */
+export const WithDescription = {
+	render: () => html`
+		<grantcodes-footer>
+			<grantcodes-footer-column>
+				<h3>MyCompany</h3>
+				<p>Building amazing products that help teams work better together.</p>
+			</grantcodes-footer-column>
+
+			${columns}
+
+			<div slot="bottom">
+				<p>&copy; 2024 MyCompany, Inc. All rights reserved.</p>
+			</div>
+			<div slot="bottom">
+				<a href="/privacy">Privacy</a> • <a href="/terms">Terms</a> • <a href="/cookies">Cookies</a>
+			</div>
+		</grantcodes-footer>
+	`,
+};

package/src/components/footer/footer.styles.js

@@ -0,0 +1,90 @@
+import { css } from "lit";
+
+export const footerStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+		container-type: inline-size;
+		container-name: footer;
+	}
+
+	.footer {
+		margin-block-start: auto;
+	}
+
+	.footer__container {
+		padding-block: 3rem 2rem;
+		padding-inline: 1rem;
+		max-inline-size: 1400px;
+		margin-inline: auto;
+	}
+
+	.footer__columns {
+		display: grid;
+		grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
+		gap: 2rem;
+	}
+
+	/* Responsive grid using container queries */
+	@container footer (max-width: 768px) {
+		.footer__columns {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@container footer (max-width: 480px) {
+		.footer__columns {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	/* Bottom section (copyright, social links, etc.) */
+	.footer__bottom {
+		margin-block-start: 2rem;
+		padding-block-start: 2rem;
+		border-block-start: 1px solid var(--g-theme-color-border-default);
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.footer__bottom:has(slot[name="bottom"]:empty) {
+		display: none;
+	}
+
+	@container footer (max-width: 640px) {
+		.footer__bottom {
+			flex-direction: column;
+			text-align: center;
+		}
+	}
+
+	/* Slotted content styling */
+	::slotted(*) {
+		font-size: var(--g-typography-font-size-14);
+		color: var(--g-theme-color-content-secondary);
+	}
+
+	::slotted(p) {
+		margin: 0;
+		line-height: 1.5;
+	}
+
+	::slotted(a) {
+		color: var(--g-theme-color-content-secondary);
+		text-decoration: none;
+		transition: color 0.2s ease;
+	}
+
+	::slotted(a:hover) {
+		color: var(--g-theme-color-content-default);
+		text-decoration: underline;
+	}
+`;

package/src/components/footer/footer.test.js

@@ -0,0 +1,107 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./footer.js";
+
+describe("Footer Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-footer");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have 3 columns by default", async () => {
+		element = await fixture("grantcodes-footer");
+		assert.strictEqual(element.columns, 3, "Should have 3 columns by default");
+	});
+
+	it("should render footer element", async () => {
+		element = await fixture("grantcodes-footer");
+		const footer = element.shadowRoot.querySelector("footer");
+		assert.ok(footer, "Footer element should exist");
+	});
+
+	it("should render footer columns container", async () => {
+		element = await fixture("grantcodes-footer");
+		const columns = element.shadowRoot.querySelector(".footer__columns");
+		assert.ok(columns, "Columns container should exist");
+	});
+
+	it("should apply columns CSS variable", async () => {
+		element = await fixture("grantcodes-footer", {
+			columns: 4,
+		});
+
+		const columns = element.shadowRoot.querySelector(".footer__columns");
+		const style = columns.getAttribute("style");
+		assert.ok(style.includes("--footer-columns: 4"), "Should set columns CSS variable");
+	});
+
+	it("should have default content slot", async () => {
+		element = await fixture("grantcodes-footer");
+		const slot = element.shadowRoot.querySelector("slot:not([name])");
+		assert.ok(slot, "Default slot should exist");
+	});
+
+	it("should render bottom section when content is provided", async () => {
+		element = await fixture("grantcodes-footer");
+
+		// Add content to bottom slot
+		const bottomContent = document.createElement("div");
+		bottomContent.setAttribute("slot", "bottom");
+		bottomContent.textContent = "Bottom content";
+		element.appendChild(bottomContent);
+
+		await element.updateComplete;
+		// Force a re-render to check the slot
+		element.requestUpdate();
+		await element.updateComplete;
+
+		const bottom = element.shadowRoot.querySelector(".footer__bottom");
+		assert.ok(bottom, "Bottom section should exist when content is slotted");
+	});
+
+	it("should support different column counts", async () => {
+		const columnCounts = [1, 2, 3, 4, 5, 6];
+
+		for (const count of columnCounts) {
+			element = await fixture("grantcodes-footer", { columns: count });
+			assert.strictEqual(element.columns, count, `Should support ${count} columns`);
+			cleanup(element);
+		}
+	});
+
+	it("should have footer container", async () => {
+		element = await fixture("grantcodes-footer");
+		const container = element.shadowRoot.querySelector(".footer__container");
+		assert.ok(container, "Footer container should exist");
+	});
+
+	it("should have footer class", async () => {
+		element = await fixture("grantcodes-footer");
+		const footer = element.shadowRoot.querySelector(".footer");
+		assert.ok(footer, "Should have footer class");
+	});
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-footer");
+		const content = document.createElement("div");
+		content.textContent = "Footer content";
+		element.appendChild(content);
+
+		await element.updateComplete;
+
+		assert.ok(
+			element.querySelector("div"),
+			"Slotted content should be present",
+		);
+	});
+});
+
+

package/src/components/footer/index.js

@@ -0,0 +1,2 @@
+export { GrantCodesFooter } from "./footer.component.js";
+export { GrantCodesFooterColumn } from "./footer-column.component.js";

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

@@ -0,0 +1,173 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { formFieldStyles } from "./form-field.styles.js";
+import { cx } from "../../lib/classnames.js";
+import { generateId } from "../../lib/generate-id.js";
+
+export class GrantCodesFormField extends LitElement {
+	static formAssociated = true;
+	static styles = [formFieldStyles];
+
+	static properties = {
+		label: { type: String },
+		error: { type: String },
+		help: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		this.label = "";
+		this.error = undefined;
+		this.help = undefined;
+
+		this.inlineInput = false;
+		this.groupInput = false;
+
+		/** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
+		this.inputElements;
+
+		/** @type {NodeListOf<GrantCodesFormField>} */
+		this.nestedFields;
+
+		if (!this.id) {
+			this.id = generateId("form-field");
+		}
+	}
+
+	get errorId() {
+		return `${this.id}-error`;
+	}
+
+	get helpId() {
+		return `${this.id}-help`;
+	}
+
+	get ariaDescribedBy() {
+		const ids = [];
+		if (this.error) {
+			ids.push(this.errorId);
+		}
+		if (this.help) {
+			ids.push(this.helpId);
+		}
+		return ids.join(" ");
+	}
+
+	firstUpdated() {
+		// Initialize inputs and nested fields if not already set
+		if (!this.inputElements) {
+			this.inputElements = this.querySelectorAll(
+				"input, select, textarea",
+			);
+		}
+		if (!this.nestedFields) {
+			this.nestedFields = this.querySelectorAll("grantcodes-form-field");
+		}
+
+		const input = this.inputElements[0];
+
+		if (this.nestedFields.length > 0) {
+			this.groupInput = true;
+			this.requestUpdate();
+		}
+
+		if (!input) {
+			return;
+		}
+
+		input.id = this.id;
+		input.setAttribute("aria-describedby", this.ariaDescribedBy);
+
+		if (input.type === "checkbox" || input.type === "radio") {
+			this.inlineInput = true;
+			this.requestUpdate();
+		}
+	}
+
+	handleLabelClick() {
+		const input = this.inputElements[0];
+		if (input) {
+			input.focus();
+			if (
+				input instanceof HTMLInputElement &&
+				(input.type === "checkbox" || input.type === "radio")
+			) {
+				input.checked = !input.checked;
+			}
+		}
+	}
+
+	// handleError() {
+	//   if (this.error) {
+	//     const input = this.inputElements[0]
+	//     if (input) {
+	//       if (this.help) {
+	//         input.setAttribute('aria-describedby', `${this.errorId} ${this.helpId}`)
+	//       } else {
+	//         input.setAttribute('aria-describedby', this.errorId)
+	//       }
+	//     }
+	//   }
+	// }
+
+	errorTemplate() {
+		if (!this.error) {
+			return html``;
+		}
+
+		return html`
+      <p class="form-field__error" id=${this.errorId}>Error: ${this.error}</p>
+    `;
+	}
+
+	helpTemplate() {
+		if (!this.help) {
+			return html``;
+		}
+
+		return html`
+      <span class="form-field__help" id=${this.helpId}>${this.help}</span>
+    `;
+	}
+
+	/**
+	 * Template for a group of form components
+	 *
+	 * @param   {string}  className  html class attribute
+	 *
+	 * @return  {}             [return description]
+	 */
+	groupTemplate(className) {
+		return html`
+      <fieldset class="${className}">
+        <legend class="form-field__label">${this.label}</legend>
+        <slot></slot>
+        ${this.errorTemplate()}
+      </fieldset>
+    `;
+	}
+
+	render() {
+		const elementClass = cx("form-field", {
+			"form-field--inline": this.inlineInput,
+		});
+
+		if (this.groupInput) {
+			return this.groupTemplate(elementClass);
+		}
+
+		return html`
+      <div class="${elementClass}">
+        <label>
+          <span class="form-field__label" @click=${this.handleLabelClick}
+            >${this.label}</span
+          >
+          ${this.helpTemplate()}
+          <slot></slot>
+        </label>
+        ${this.errorTemplate()}
+      </div>
+    `;
+	}
+}

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

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

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

@@ -0,0 +1,104 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } = getStorybookHelpers(
+	"grantcodes-form-field",
+);
+import "./form-field.js";
+
+const meta = {
+	title: "Components/FormField",
+	component: "grantcodes-form-field",
+	args: {
+		...args,
+		label: "Label",
+		error: "",
+		help: "",
+		slot: html`<input type="text" placeholder="This is a placeholder" />`,
+	},
+	argTypes,
+	decorators: [(story) => html`<form>${story()}</form>`],
+	render: (args) => template(args, args.slot),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const FormField = {};
+
+export const FormFieldWithError = {
+	args: {
+		error: "This is an error",
+	},
+};
+
+export const FormFieldWithHelp = {
+	args: {
+		help: "This is help text",
+	},
+};
+
+export const FormFieldWithSelect = {
+	args: {
+		slot: html`
+      <select>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </select>
+    `,
+	},
+};
+
+export const FormFieldWithTextArea = {
+	args: {
+		slot: html`<textarea placeholder="This is a placeholder"></textarea>`,
+	},
+};
+
+export const FormFieldWithCheckbox = {
+	args: {
+		slot: html`<input type="checkbox" value="1" name="name" />`,
+	},
+};
+
+export const FormFieldWithRadio = {
+	args: {
+		slot: html`<input type="radio" />`,
+	},
+};
+
+export const FormFieldWithRadioGroup = {
+	args: {
+		slot: html`
+      <grantcodes-form-field label="Radio number 1">
+        <input type="radio" name="radio-group" value="1" />
+      </grantcodes-form-field>
+      <grantcodes-form-field label="Radio number 2">
+        <input type="radio" name="radio-group" value="2" />
+      </grantcodes-form-field>
+      <grantcodes-form-field label="Radio number 3">
+        <input type="radio" name="radio-group" value="3" />
+      </grantcodes-form-field>
+    `,
+	},
+};
+
+export const FormFieldWithCheckboxGroup = {
+	args: {
+		slot: html`
+      <grantcodes-form-field label="Checkbox number 1"
+        ><input type="checkbox"
+      /></grantcodes-form-field>
+      <grantcodes-form-field label="Checkbox number 2"
+        ><input type="checkbox"
+      /></grantcodes-form-field>
+      <grantcodes-form-field label="Checkbox number 3"
+        ><input type="checkbox"
+      /></grantcodes-form-field>
+    `,
+	},
+};

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

@@ -0,0 +1,47 @@
+import { css } from "lit";
+
+export const formFieldStyles = css`
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.form-field label,
+.form-field slot {
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
+}
+
+.form-field--inline label {
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.form-field__label {
+  margin: 0;
+  padding: 0;
+
+  &:where(legend) {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.form-field__help {
+  font-size: var(--g-typography-font-size-14);
+  opacity: 0.7;
+}
+
+.form-field__error {
+  margin: 0;
+  font-size: var(--g-typography-font-size-14);
+  color: var(--g-color-utility-red-700);
+}
+
+`;