@grantcodes/ui 2.0.0 → 2.1.0

package/src/components/container/container.styles.js

@@ -1,43 +1,45 @@
 import { css } from "lit";
 
 export const containerStyles = css`
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    inline-size: 1200px;
+    max-inline-size: 100%;
+    padding-inline: var(--g-theme-spacing-md);
+    margin-inline: auto;
+    background-color: inherit;
+  }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  inline-size: 1200px;
-  max-inline-size: 100%;
-  padding-inline: 1rem;
-  margin-inline: auto;
-  background-color: inherit;
-}
+  .container--prose {
+    max-inline-size: 65ch;
+  }
 
-.container--wide {
-  inline-size: 1400px;
-}
+  .container--wide {
+    inline-size: 1400px;
+  }
 
-.container--full {
-  inline-size: 100%;
-}
+  .container--full {
+    inline-size: 100%;
+  }
 
-.container--viewport {
-  inset-inline-start: 50%;
-  position: relative;
-  inset-inline-end: 50%;
-  margin-inline-start: -50vw;
-  margin-inline-end: -50vw;
-  max-inline-size: 100vw;
-  inline-size: 100vw;
-  margin-inline-start: -50dvw;
-  margin-inline-end: -50dvw;
-  max-inline-size: 100dvw;
-  inline-size: 100dvw;
-}
+  .container--viewport {
+    inset-inline-start: 50%;
+    position: relative;
+    inset-inline-end: 50%;
+    margin-inline-start: -50vw;
+    margin-inline-end: -50vw;
+    max-inline-size: 100vw;
+    inline-size: 100vw;
+    margin-inline-start: -50dvw;
+    margin-inline-end: -50dvw;
+    max-inline-size: 100dvw;
+    inline-size: 100dvw;
+  }
 
-.container--nopad {
-  padding-inline: 0;
-}
-
-`;
+  .container--nopad {
+    padding-inline: 0;
+  }
+`;

package/src/components/container/container.test.js

@@ -80,5 +80,3 @@ describe("Container Component", () => {
 		assert.ok(slot, "Slot should exist");
 	});
 });
-
-

package/src/components/container/index.js

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

package/src/components/cta/cta.component.js

@@ -0,0 +1,108 @@
+import { LitElement, html } from "lit";
+import { ctaStyles } from "./cta.styles.js";
+import "../button/button.js";
+
+export class GrantCodesCta extends LitElement {
+	static styles = [ctaStyles];
+
+	static properties = {
+		/**
+		 * Small label shown above the title.
+		 * @type {string}
+		 */
+		eyebrow: { type: String },
+		/**
+		 * Main heading text.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Supporting paragraph text.
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Primary CTA as a JSON string: `{"label":"...","href":"..."}`.
+		 * @type {string}
+		 */
+		primaryAction: { type: String, attribute: "primary-action" },
+		/**
+		 * Secondary CTA as a JSON string: `{"label":"...","href":"..."}`.
+		 * @type {string}
+		 */
+		secondaryAction: { type: String, attribute: "secondary-action" },
+		/**
+		 * Text alignment of the block.
+		 * @type {'left' | 'center'}
+		 */
+		align: { type: String, reflect: true },
+	};
+
+	constructor() {
+		super();
+		this.eyebrow = "";
+		this.title = "";
+		this.text = "";
+		this.primaryAction = "";
+		this.secondaryAction = "";
+		this.align = "center";
+	}
+
+	get _primaryAction() {
+		try {
+			return this.primaryAction ? JSON.parse(this.primaryAction) : null;
+		} catch {
+			return null;
+		}
+	}
+
+	get _secondaryAction() {
+		try {
+			return this.secondaryAction ? JSON.parse(this.secondaryAction) : null;
+		} catch {
+			return null;
+		}
+	}
+
+	render() {
+		const primary = this._primaryAction;
+		const secondary = this._secondaryAction;
+		return html`
+			<section class="cta">
+				<div class="cta__container">
+					${
+						this.eyebrow
+							? html`<p class="cta__eyebrow">${this.eyebrow}</p>`
+							: null
+					}
+					<h2 class="cta__title">${this.title}</h2>
+					${this.text ? html`<p class="cta__text">${this.text}</p>` : null}
+					${
+						primary || secondary
+							? html`
+								<div class="cta__actions">
+									${
+										primary
+											? html`<grantcodes-button href=${primary.href}
+												>${primary.label}</grantcodes-button
+											>`
+											: null
+									}
+									${
+										secondary
+											? html`<a
+												href=${secondary.href}
+												class="cta__secondary-link"
+												>${secondary.label}</a
+											>`
+											: null
+									}
+								</div>
+							`
+							: null
+					}
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/cta/cta.js

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

package/src/components/cta/cta.stories.js

@@ -0,0 +1,56 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./cta.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-cta");
+
+const meta = {
+	title: "Blocks/CTA",
+	component: "grantcodes-cta",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+/**
+ * Default centered CTA with primary and secondary actions.
+ */
+export const Default = {
+	args: {
+		eyebrow: "Get started today",
+		title: "Build something remarkable",
+		text: "A personal web component library with a custom design system, ready for your next project.",
+		"primary-action": JSON.stringify({ label: "Get started", href: "/docs" }),
+		"secondary-action": JSON.stringify({ label: "Learn more", href: "/about" }),
+		align: "center",
+	},
+};
+
+/**
+ * Left-aligned CTA, no secondary action.
+ */
+export const LeftAligned = {
+	args: {
+		title: "Ready to ship?",
+		text: "Deploy your components today with zero configuration.",
+		"primary-action": JSON.stringify({ label: "Deploy now", href: "/deploy" }),
+		align: "left",
+	},
+};
+
+/**
+ * Minimal CTA — title only with a single action.
+ */
+export const Minimal = {
+	args: {
+		title: "Join the community",
+		"primary-action": JSON.stringify({ label: "Sign up", href: "/signup" }),
+		align: "center",
+	},
+};

package/src/components/cta/cta.styles.js

@@ -0,0 +1,64 @@
+import { css } from "lit";
+
+export const ctaStyles = css`
+  :host {
+    display: block;
+  }
+
+  .cta {
+    padding-block: var(--g-theme-spacing-3xl);
+    padding-inline: var(--g-theme-spacing-md);
+    background: var(--g-theme-color-background-subtle);
+  }
+
+  .cta__container {
+    max-width: 65ch;
+    margin: 0 auto;
+  }
+
+  :host([align="center"]) .cta {
+    text-align: center;
+  }
+
+  :host([align="center"]) .cta__actions {
+    justify-content: center;
+  }
+
+  .cta__eyebrow {
+    margin: 0 0 var(--g-theme-spacing-sm);
+    font-size: var(--g-theme-typography-meta-default-font-size);
+    font-weight: var(--g-theme-typography-meta-default-font-weight);
+    letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
+    text-transform: uppercase;
+    color: var(--g-theme-color-content-brand, #7c3aed);
+  }
+
+  .cta__title {
+    margin: 0 0 var(--g-theme-spacing-md);
+    font: var(--g-theme-typography-headline-lg);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .cta__text {
+    margin: 0 0 var(--g-theme-spacing-xl);
+    font: var(--g-theme-typography-body-lg);
+    color: var(--g-theme-color-content-secondary);
+  }
+
+  .cta__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--g-theme-spacing-md);
+    align-items: center;
+  }
+
+  .cta__secondary-link {
+    font-size: var(--g-theme-typography-body-default-font-size);
+    font-weight: var(--g-typography-font-weight-500);
+    color: var(--g-theme-color-content-default);
+  }
+
+  .cta__secondary-link:hover {
+    color: var(--g-theme-color-content-brand, #7c3aed);
+  }
+`;

package/src/components/cta/index.js

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

package/src/components/dialog/dialog.js

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

package/src/components/dialog/dialog.styles.js

@@ -26,17 +26,17 @@ export const dialogStyles = css`
   position: absolute;
   border: none;
   line-height: 1;
-  font-size: 1.4rem;
+  font-size: var(--g-theme-typography-title-lg-font-size);
   cursor: pointer;
   background: transparent;
-  inset-block-start: 1rem;
-  inset-inline-end: 1rem;
+  inset-block-start: var(--g-theme-spacing-md);
+  inset-inline-end: var(--g-theme-spacing-md);
   margin-block-start: -0.25rem;
   margin-inline-end: -0.25rem;
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  padding: 0.25rem;
+  padding: var(--g-theme-spacing-xs);
   justify-content: center;
   align-items: center;
 }
@@ -45,8 +45,8 @@ export const dialogStyles = css`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  gap: 1rem;
-  padding: 1rem;
+  gap: var(--g-theme-spacing-md);
+  padding: var(--g-theme-spacing-md);
 }
 
 .dialog__header,
@@ -62,7 +62,7 @@ export const dialogStyles = css`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem;
+  padding: var(--g-theme-spacing-md);
   border-bottom: var(--g-theme-border-width-sm) solid
     var(--g-theme-color-border-default);
 }
@@ -71,4 +71,4 @@ export const dialogStyles = css`
   --g-theme-border-radius-md: 0;
 }
 
-`;
+`;

package/src/components/dialog/dialog.test.js

@@ -18,7 +18,11 @@ describe("Dialog Component", () => {
 
 	it("should be closed by default", async () => {
 		element = await fixture("grantcodes-dialog");
-		assert.strictEqual(element.open, false, "Dialog should be closed by default");
+		assert.strictEqual(
+			element.open,
+			false,
+			"Dialog should be closed by default",
+		);
 	});
 
 	it("should render dialog element", async () => {
@@ -40,7 +44,11 @@ describe("Dialog Component", () => {
 
 	it("should be dismissible by default", async () => {
 		element = await fixture("grantcodes-dialog");
-		assert.strictEqual(element.dismissible, true, "Should be dismissible by default");
+		assert.strictEqual(
+			element.dismissible,
+			true,
+			"Should be dismissible by default",
+		);
 	});
 
 	it("should render dismiss button when dismissible", async () => {
@@ -75,7 +83,7 @@ describe("Dialog Component", () => {
 
 	it("should have default content slot", async () => {
 		element = await fixture("grantcodes-dialog");
-		const slot = element.shadowRoot.querySelector('slot.dialog__content');
+		const slot = element.shadowRoot.querySelector("slot.dialog__content");
 		assert.ok(slot, "Content slot should exist");
 	});
 
@@ -93,5 +101,3 @@ describe("Dialog Component", () => {
 		assert.strictEqual(element.open, false, "Dialog should be closed");
 	});
 });
-
-

package/src/components/dialog/index.js

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

package/src/components/dropdown/dropdown.component.js

@@ -121,7 +121,7 @@ export class GrantCodesDropdown extends LitElement {
 				detail: { open: this.open },
 				bubbles: true,
 				composed: true,
-			})
+			}),
 		);
 	}
 
@@ -155,7 +155,9 @@ export class GrantCodesDropdown extends LitElement {
 	}
 
 	render() {
-		const placementClass = this.placement ? `dropdown__menu--${this.placement}` : "";
+		const placementClass = this.placement
+			? `dropdown__menu--${this.placement}`
+			: "";
 		const openClass = this.open ? "dropdown__menu--open" : "";
 		return html`
       <div class="dropdown">
@@ -202,7 +204,7 @@ export class GrantCodesDropdownItem extends LitElement {
 			new CustomEvent("select", {
 				bubbles: true,
 				composed: true,
-			})
+			}),
 		);
 
 		// Close the dropdown

package/src/components/dropdown/dropdown.js

@@ -6,7 +6,9 @@ import {
 export * from "./dropdown.component.js";
 export default GrantCodesDropdown;
 
-customElements.define("grantcodes-dropdown", GrantCodesDropdown);
-customElements.define("grantcodes-dropdown-item", GrantCodesDropdownItem);
-
-
+if (!customElements.get("grantcodes-dropdown")) {
+	customElements.define("grantcodes-dropdown", GrantCodesDropdown);
+}
+if (!customElements.get("grantcodes-dropdown-item")) {
+	customElements.define("grantcodes-dropdown-item", GrantCodesDropdownItem);
+}

package/src/components/dropdown/dropdown.styles.js

@@ -23,8 +23,8 @@ export const dropdownStyles = css`
 		anchor-name: --dropdown-trigger;
 		z-index: 1000;
 		min-inline-size: 12rem;
-		margin-block: 0.25rem;
-		padding-block: 0.5rem;
+		margin-block: var(--g-theme-spacing-xs);
+		padding-block: var(--g-theme-spacing-sm);
 		background-color: var(--g-theme-color-background-default);
 		border: 1px solid var(--g-theme-color-border-default);
 		border-radius: var(--g-theme-border-radius-md);
@@ -53,9 +53,9 @@ export const dropdownStyles = css`
 		display: flex;
 		width: 100%;
 		align-items: center;
-		gap: 0.5rem;
-		padding-block: 0.5rem;
-		padding-inline: 1rem;
+		gap: var(--g-theme-spacing-sm);
+		padding-block: var(--g-theme-spacing-sm);
+		padding-inline: var(--g-theme-spacing-md);
 		font-size: var(--g-typography-font-size-16);
 		color: var(--g-theme-color-content-default);
 		cursor: pointer;

package/src/components/dropdown/dropdown.test.js

@@ -23,7 +23,11 @@ describe("Dropdown Component", () => {
 
 	it("should have bottom-start placement by default", async () => {
 		element = await fixture("grantcodes-dropdown");
-		assert.strictEqual(element.placement, "bottom-start", "Default placement should be bottom-start");
+		assert.strictEqual(
+			element.placement,
+			"bottom-start",
+			"Default placement should be bottom-start",
+		);
 	});
 
 	it("should have trigger slot", async () => {
@@ -47,7 +51,11 @@ describe("Dropdown Component", () => {
 	it("should have role=menu on menu", async () => {
 		element = await fixture("grantcodes-dropdown");
 		const menu = element.shadowRoot.querySelector(".dropdown__menu");
-		assert.strictEqual(menu.getAttribute("role"), "menu", "Menu should have role");
+		assert.strictEqual(
+			menu.getAttribute("role"),
+			"menu",
+			"Menu should have role",
+		);
 	});
 
 	it("should apply placement class to menu", async () => {
@@ -85,7 +93,11 @@ describe("Dropdown Item Component", () => {
 
 	it("should not be disabled by default", async () => {
 		element = await fixture("grantcodes-dropdown-item");
-		assert.strictEqual(element.disabled, false, "Should not be disabled by default");
+		assert.strictEqual(
+			element.disabled,
+			false,
+			"Should not be disabled by default",
+		);
 	});
 
 	it("should render with disabled class when disabled", async () => {
@@ -133,7 +145,11 @@ describe("Dropdown Item Component", () => {
 
 		await element.updateComplete;
 
-		assert.strictEqual(element.textContent, "Menu Item", "Slotted content should be rendered");
+		assert.strictEqual(
+			element.textContent,
+			"Menu Item",
+			"Slotted content should be rendered",
+		);
 	});
 
 	it("should have dropdown-item wrapper", async () => {

package/src/components/dropdown/index.js

@@ -1,3 +1 @@
 export * from "./dropdown.js";
-
-

package/src/components/dropzone/dropzone.component.js

@@ -97,7 +97,7 @@ export class GrantCodesDropzone extends LitElement {
 		super.disconnectedCallback();
 	}
 
-    firstUpdated() {
+	firstUpdated() {
 		// Find input elements in the slot
 		const slot = this.renderRoot.querySelector("slot");
 		if (slot) {
@@ -108,11 +108,12 @@ export class GrantCodesDropzone extends LitElement {
 		}
 
 		if (this._input.length === 0) {
-            // In unit tests, allow rendering without an input to reduce friction
-            const isTestEnv = typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
-            if (!isTestEnv) {
-                throw new Error("No file input found");
-            }
+			// In unit tests, allow rendering without an input to reduce friction
+			const isTestEnv =
+				typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
+			if (!isTestEnv) {
+				throw new Error("No file input found");
+			}
 			this._placeholder = "";
 			return;
 		}

package/src/components/dropzone/dropzone.styles.js

@@ -17,7 +17,7 @@ export const dropzoneStyles = css`
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 2rem;
+	padding: var(--g-theme-spacing-xl);
 	border: max(var(--g-theme-border-width-md), 0.2rem) dashed var(--g-theme-color-border-default);
 	border-radius: var(--g-theme-border-radius-md);
 	background-color: var(--g-theme-color-background-subtle);
@@ -34,14 +34,14 @@ export const dropzoneStyles = css`
 	content: '';
 	display: flex;
 	position: fixed;
-	inset: 2rem;
+	inset: var(--g-theme-spacing-xl);
 	justify-content: center;
 	align-items: center;
-	padding: 2rem;
+	padding: var(--g-theme-spacing-xl);
 	border: max(calc(var(--g-theme-border-width-md) * 2), 0.4rem) dashed var(--g-theme-color-border-default);
 	border-radius: calc(var(--g-theme-border-radius-md) * 2);
 	z-index: 11;
-	font-weight: bold;
+	font-weight: var(--g-typography-font-weight-700);
 	color: inherit;
 }
 

package/src/components/dropzone/dropzone.test.js

@@ -52,7 +52,9 @@ describe("Dropzone Component", () => {
 		input.placeholder = "Drop files here";
 		element.appendChild(input);
 		await element.updateComplete;
-		const placeholder = element.shadowRoot.querySelector(".dropzone__placeholder");
+		const placeholder = element.shadowRoot.querySelector(
+			".dropzone__placeholder",
+		);
 		assert.ok(placeholder, "Placeholder element should exist");
 	});
 
@@ -103,10 +105,10 @@ describe("Dropzone Component", () => {
 
 		await element.updateComplete;
 
-		const placeholder = element.shadowRoot.querySelector(".dropzone__placeholder");
+		const placeholder = element.shadowRoot.querySelector(
+			".dropzone__placeholder",
+		);
 		// The placeholder text is set from the input's placeholder in firstUpdated
 		assert.ok(placeholder, "Placeholder should exist");
 	});
 });
-
-

package/src/components/dropzone/index.js

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