@grantcodes/ui 2.0.2 → 2.1.0

package/src/components/feature-list/feature-list.component.js

@@ -0,0 +1,130 @@
+import { LitElement, html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import * as icons from "lucide-static";
+import { featureListStyles } from "./feature-list.styles.js";
+import "../icon/icon.js";
+
+export class GrantCodesFeatureList extends LitElement {
+	static styles = [featureListStyles];
+
+	static properties = {
+		/**
+		 * Optional section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Optional supporting text below the heading.
+		 * @type {string}
+		 */
+		subtitle: { type: String },
+		/**
+		 * Feature items as a JSON string array: `[{"title":"...","description":"...","icon":"...","href":"..."}]`.
+		 * @type {string}
+		 */
+		items: { type: String },
+		/**
+		 * Number of columns in the grid (1–4).
+		 * @type {number}
+		 */
+		columns: { type: Number },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.subtitle = "";
+		this.items = "[]";
+		this.columns = 3;
+	}
+
+	get _items() {
+		try {
+			return JSON.parse(this.items);
+		} catch {
+			return [];
+		}
+	}
+
+	_iconSvg(name) {
+		if (!name) return null;
+		// Convert kebab-case to PascalCase for lucide-static lookup
+		const key = name
+			.split("-")
+			.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+			.join("");
+		// biome-ignore lint/performance/noDynamicNamespaceImportAccess: icon names are runtime strings; static imports are not feasible here
+		return icons[key] ?? null;
+	}
+
+	_renderIcon(name) {
+		const svg = this._iconSvg(name);
+		if (!svg) return null;
+		return html`<grantcodes-icon class="feature-list__icon" aria-hidden="true">${unsafeHTML(svg)}</grantcodes-icon>`;
+	}
+
+	render() {
+		const items = this._items;
+		return html`
+			<section class="feature-list">
+				<div class="feature-list__container">
+					${
+						this.title
+							? html`<h2 class="feature-list__title">${this.title}</h2>`
+							: null
+					}
+					${
+						this.subtitle
+							? html`<p class="feature-list__subtitle">${this.subtitle}</p>`
+							: null
+					}
+					<ul
+						class="feature-list__grid"
+						style="--columns: ${this.columns}"
+						role="list"
+					>
+						${items.map(
+							(item) => html`
+								<li class="feature-list__item">
+									${
+										item.href
+											? html`
+												<a href=${item.href} class="feature-list__link">
+												${this._renderIcon(item.icon)}
+												<h3 class="feature-list__item-title">
+														${item.title}
+													</h3>
+													${
+														item.description
+															? html`<p class="feature-list__item-desc">
+																${item.description}
+															</p>`
+															: null
+													}
+												</a>
+											`
+											: html`
+												<div class="feature-list__content">
+												${this._renderIcon(item.icon)}
+												<h3 class="feature-list__item-title">
+														${item.title}
+													</h3>
+													${
+														item.description
+															? html`<p class="feature-list__item-desc">
+																${item.description}
+															</p>`
+															: null
+													}
+												</div>
+											`
+									}
+								</li>
+							`,
+						)}
+					</ul>
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/feature-list/feature-list.js

@@ -0,0 +1,6 @@
+import { GrantCodesFeatureList } from "./feature-list.component.js";
+
+export * from "./feature-list.component.js";
+export default GrantCodesFeatureList;
+
+customElements.define("grantcodes-feature-list", GrantCodesFeatureList);

package/src/components/feature-list/feature-list.stories.js

@@ -0,0 +1,117 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./feature-list.js";
+
+const { events, args, argTypes } = getStorybookHelpers(
+	"grantcodes-feature-list",
+);
+
+const meta = {
+	title: "Blocks/FeatureList",
+	component: "grantcodes-feature-list",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const sampleItems = JSON.stringify([
+	{
+		title: "Fast by default",
+		description: "Zero-runtime CSS with design tokens baked in at build time.",
+		icon: "⚡",
+	},
+	{
+		title: "Accessible",
+		description:
+			"WAI-ARIA compliant components with keyboard navigation support.",
+		icon: "♿",
+	},
+	{
+		title: "Themeable",
+		description: "Switch between themes without touching component code.",
+		icon: "🎨",
+	},
+	{
+		title: "Framework-agnostic",
+		description: "Standard web components that work anywhere.",
+		icon: "🔌",
+	},
+	{
+		title: "Tree-shakeable",
+		description: "Import only the components you use.",
+		icon: "🌲",
+	},
+	{
+		title: "Well documented",
+		description: "Storybook stories and JSDoc for every component.",
+		icon: "📚",
+	},
+]);
+
+/**
+ * Default 3-column feature grid with heading and subtitle.
+ */
+export const Default = {
+	args: {
+		title: "Everything you need",
+		subtitle: "Built for developers who care about quality.",
+		items: sampleItems,
+		columns: 3,
+	},
+};
+
+/**
+ * Two-column layout — useful for simpler feature sets.
+ */
+export const TwoColumn = {
+	args: {
+		title: "Key features",
+		items: JSON.stringify([
+			{
+				title: "Design tokens",
+				description:
+					"Consistent spacing, colour, and typography across your entire UI.",
+				icon: "🎯",
+			},
+			{
+				title: "Lit-powered",
+				description: "Lightweight reactive web components built with Lit.",
+				icon: "🔥",
+			},
+		]),
+		columns: 2,
+	},
+};
+
+/**
+ * Features with links on each item.
+ */
+export const WithLinks = {
+	args: {
+		title: "Explore components",
+		items: JSON.stringify([
+			{
+				title: "Button",
+				description: "Primary, secondary, ghost variants.",
+				href: "/button",
+			},
+			{
+				title: "Card",
+				description: "Flexible content containers.",
+				href: "/card",
+			},
+			{
+				title: "Dialog",
+				description: "Accessible modal dialogs.",
+				href: "/dialog",
+			},
+		]),
+		columns: 3,
+	},
+};

package/src/components/feature-list/feature-list.styles.js

@@ -0,0 +1,82 @@
+import { css } from "lit";
+
+export const featureListStyles = css`
+  :host {
+    display: block;
+  }
+
+  .feature-list {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  .feature-list__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .feature-list__title {
+    margin: 0 0 var(--g-theme-spacing-sm);
+    font: var(--g-theme-typography-headline-sm);
+    text-align: center;
+    color: var(--g-theme-color-content-default);
+  }
+
+  .feature-list__subtitle {
+    margin: 0 auto var(--g-theme-spacing-2xl);
+    font-size: var(--g-theme-typography-body-lg-font-size);
+    text-align: center;
+    color: var(--g-theme-color-content-secondary);
+    max-width: 55ch;
+  }
+
+  .feature-list__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--columns, 3), 1fr);
+    gap: var(--g-theme-spacing-xl);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @media (max-width: 768px) {
+    .feature-list__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 769px) and (max-width: 1024px) {
+    .feature-list__grid {
+      grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
+    }
+  }
+
+  .feature-list__link,
+  .feature-list__content {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .feature-list__link:hover .feature-list__item-title {
+    color: var(--g-theme-color-content-brand, #7c3aed);
+  }
+
+  .feature-list__icon {
+    display: block;
+    padding: var(--g-theme-spacing-md);
+    border-radius: 50%;
+    inline-size: fit-content;
+    margin-block-end: var(--g-theme-spacing-md);
+    color: var(--g-theme-color-content-brand, currentColor);
+    background-color: var(--g-theme-color-background-brand);
+  }
+
+  .feature-list__item-title {
+    font: var(--g-theme-typography-title-default);
+  }
+
+  .feature-list__item-desc {
+    color: var(--g-theme-color-content-secondary);
+  }
+`;

package/src/components/feature-list/index.js

@@ -0,0 +1 @@
+export * from "./feature-list.js";

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

@@ -1,51 +1,50 @@
 import { css } from "lit";
 
 export const footerColumnStyles = css`
-	:host {
-		display: block;
-	}
-
-	.footer-column {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	::slotted(h3) {
-		font-size: var(--g-typography-font-size-16);
-		color: var(--g-theme-color-content-default);
-		margin: 0 0 0.5rem 0;
-		font-weight: 600;
-	}
-
-	::slotted(ul) {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	::slotted(li) {
-		margin: 0;
-	}
-
-	::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;
-	}
-
-	::slotted(p) {
-		margin: 0;
-		color: var(--g-theme-color-content-secondary);
-		font-size: var(--g-typography-font-size-14);
-		line-height: 1.5;
-	}
+  :host {
+    display: block;
+  }
+
+  .footer-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-12);
+  }
+
+  ::slotted(h3) {
+    font-size: var(--g-typography-font-size-16);
+    color: var(--g-theme-color-content-default);
+    margin: 0 0 var(--g-theme-spacing-sm) 0;
+    font-weight: var(--g-typography-font-weight-600);
+  }
+
+  ::slotted(ul) {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  ::slotted(li) {
+    margin: 0;
+  }
+
+  ::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;
+  }
+
+  ::slotted(p) {
+    margin: 0;
+    color: var(--g-theme-color-content-secondary);
+    font: var(--g-typography-body-sm);
+  }
 `;

package/src/components/footer/footer.js

@@ -5,5 +5,9 @@ export * from "./footer.component.js";
 export * from "./footer-column.component.js";
 export default GrantCodesFooter;
 
-customElements.define("grantcodes-footer", GrantCodesFooter);
-customElements.define("grantcodes-footer-column", GrantCodesFooterColumn);
+if (!customElements.get("grantcodes-footer")) {
+	customElements.define("grantcodes-footer", GrantCodesFooter);
+}
+if (!customElements.get("grantcodes-footer-column")) {
+	customElements.define("grantcodes-footer-column", GrantCodesFooterColumn);
+}

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

@@ -18,8 +18,8 @@ export const footerStyles = css`
 	}
 
 	.footer__container {
-		padding-block: 3rem 2rem;
-		padding-inline: 1rem;
+		padding-block: var(--g-theme-spacing-2xl) var(--g-theme-spacing-xl);
+		padding-inline: var(--g-theme-spacing-md);
 		max-inline-size: 1400px;
 		margin-inline: auto;
 	}
@@ -27,7 +27,7 @@ export const footerStyles = css`
 	.footer__columns {
 		display: grid;
 		grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
-		gap: 2rem;
+		gap: var(--g-theme-spacing-xl);
 	}
 
 	/* Responsive grid using container queries */
@@ -45,14 +45,14 @@ export const footerStyles = css`
 
 	/* Bottom section (copyright, social links, etc.) */
 	.footer__bottom {
-		margin-block-start: 2rem;
-		padding-block-start: 2rem;
+		margin-block-start: var(--g-theme-spacing-xl);
+		padding-block-start: var(--g-theme-spacing-xl);
 		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;
+		gap: var(--g-theme-spacing-md);
 	}
 
 	.footer__bottom:has(slot[name="bottom"]:empty) {

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

@@ -40,7 +40,10 @@ describe("Footer Component", () => {
 
 		const columns = element.shadowRoot.querySelector(".footer__columns");
 		const style = columns.getAttribute("style");
-		assert.ok(style.includes("--footer-columns: 4"), "Should set columns CSS variable");
+		assert.ok(
+			style.includes("--footer-columns: 4"),
+			"Should set columns CSS variable",
+		);
 	});
 
 	it("should have default content slot", async () => {
@@ -72,7 +75,11 @@ describe("Footer Component", () => {
 
 		for (const count of columnCounts) {
 			element = await fixture("grantcodes-footer", { columns: count });
-			assert.strictEqual(element.columns, count, `Should support ${count} columns`);
+			assert.strictEqual(
+				element.columns,
+				count,
+				`Should support ${count} columns`,
+			);
 			cleanup(element);
 		}
 	});
@@ -103,5 +110,3 @@ describe("Footer Component", () => {
 		);
 	});
 });
-
-

package/src/components/footer/index.js

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

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

@@ -57,9 +57,7 @@ export class GrantCodesFormField extends LitElement {
 	firstUpdated() {
 		// Initialize inputs and nested fields if not already set
 		if (!this.inputElements) {
-			this.inputElements = this.querySelectorAll(
-				"input, select, textarea",
-			);
+			this.inputElements = this.querySelectorAll("input, select, textarea");
 		}
 		if (!this.nestedFields) {
 			this.nestedFields = this.querySelectorAll("grantcodes-form-field");

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

@@ -4,4 +4,3 @@ export * from "./form-field.component.js";
 export default GrantCodesFormField;
 
 customElements.define("grantcodes-form-field", GrantCodesFormField);
-

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

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

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

@@ -23,7 +23,11 @@ describe("Form Field Component", () => {
 
 		const labelElement = element.shadowRoot.querySelector(".form-field__label");
 		assert.ok(labelElement, "Label element should exist");
-		assert.strictEqual(labelElement.textContent, "Username", "Label text should match");
+		assert.strictEqual(
+			labelElement.textContent,
+			"Username",
+			"Label text should match",
+		);
 	});
 
 	it("should display error message when error is set", async () => {
@@ -70,7 +74,10 @@ describe("Form Field Component", () => {
 		});
 
 		const helpElement = element.shadowRoot.querySelector(".form-field__help");
-		assert.ok(!helpElement, "Help element should not exist when help is not provided");
+		assert.ok(
+			!helpElement,
+			"Help element should not exist when help is not provided",
+		);
 	});
 
 	it("should generate unique IDs", async () => {
@@ -114,5 +121,3 @@ describe("Form Field Component", () => {
 		assert.ok(slot, "Slot should exist for input elements");
 	});
 });
-
-

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

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

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

@@ -4,4 +4,3 @@ export * from "./gallery-image.component.js";
 export default GrantCodesGalleryImage;
 
 customElements.define("grantcodes-gallery-image", GrantCodesGalleryImage);
-

package/src/components/gallery/gallery.js

@@ -4,4 +4,3 @@ export * from "./gallery.component.js";
 export default GrantCodesGallery;
 
 customElements.define("grantcodes-gallery", GrantCodesGallery);
-

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

@@ -53,4 +53,4 @@ export const galleryStyles = css`
   color: white;
 }
 
-`;
+`;