@grantcodes/ui 2.12.1 → 2.15.5

package/src/components/notice/notice.css

@@ -8,40 +8,40 @@
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
-	gap: var(--g-theme-spacing-md);
-	padding: var(--g-theme-spacing-md);
-	border-radius: var(--g-theme-border-radius-sm, 0.25rem);
+	gap: var(--g-spacing-md);
+	padding: var(--g-spacing-md);
+	border-radius: var(--g-border-radius-sm, 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);
+	color: var(--g-color-content-utility-info);
+	background-color: var(--g-color-background-utility-info);
 }
 
 .notice--success {
-	color: var(--g-color-utility-green-900);
-	background-color: var(--g-color-utility-green-100);
+	color: var(--g-color-content-utility-success);
+	background-color: var(--g-color-background-utility-success);
 }
 
 .notice--warning {
-	color: var(--g-color-utility-yellow-900);
-	background-color: var(--g-color-utility-yellow-100);
+	color: var(--g-color-content-utility-warning);
+	background-color: var(--g-color-background-utility-warning);
 }
 
 .notice--error {
-	color: var(--g-color-utility-red-900);
-	background-color: var(--g-color-utility-red-100);
+	color: var(--g-color-content-utility-error);
+	background-color: var(--g-color-background-utility-error);
 }
 
 .notice__title {
-	font-size: var(--g-theme-typography-body-default-font-size);
+	font-size: var(--g-typography-body-default-font-size);
 	margin: 0;
 }
 
 .notice__icon {
-	font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
 }
 
 .notice__content {
@@ -53,11 +53,11 @@
 	color: inherit;
 	opacity: 0.5;
 	transition: 0.2s;
-	font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
 	line-height: 1;
-	padding: var(--g-theme-spacing-sm);
-	margin: calc(-1 * var(--g-theme-spacing-sm))
-		calc(-1 * var(--g-theme-spacing-sm)) 0 0;
+	padding: var(--g-spacing-sm);
+	margin: calc(-1 * var(--g-spacing-sm))
+		calc(-1 * var(--g-spacing-sm)) 0 0;
 	border: 0;
 
 	&:hover,

package/src/components/person/index.js

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

package/src/components/person/person.component.js

@@ -0,0 +1,51 @@
+import { LitElement, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import personStyles from "./person.css" with { type: "css" };
+import "../avatar/avatar.js";
+
+export class GrantCodesPerson extends LitElement {
+	static properties = {
+		name: { type: String },
+		role: { type: String },
+		company: { type: String },
+		avatar: { type: String },
+		alt: { type: String },
+		size: { type: String },
+	};
+
+	static styles = [personStyles];
+
+	constructor() {
+		super();
+		this.name = "";
+		this.role = "";
+		this.company = "";
+		this.avatar = "";
+		this.alt = "";
+		this.size = "medium";
+	}
+
+	get meta() {
+		return [this.role, this.company].filter(Boolean).join(", ");
+	}
+
+	render() {
+		const meta = this.meta;
+
+		return html`
+			<div class="person">
+				<grantcodes-avatar
+					src=${ifDefined(this.avatar || undefined)}
+					name=${ifDefined(this.name || undefined)}
+					alt=${ifDefined(this.alt || undefined)}
+					size=${this.size}
+				></grantcodes-avatar>
+				<div class="person__meta">
+					<cite class="person__name">${this.name}</cite>
+					${meta ? html`<span class="person__details">${meta}</span>` : null}
+					<slot name="description" class="person__description"></slot>
+				</div>
+			</div>
+		`;
+	}
+}

package/src/components/person/person.css

@@ -0,0 +1,39 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+.person {
+	display: flex;
+	align-items: center;
+	gap: var(--g-spacing-sm);
+}
+
+.person__meta {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-spacing-xs);
+	min-inline-size: 0;
+}
+
+.person__name {
+	font: var(--g-typography-body-font);
+	font-style: normal;
+	color: var(--g-color-content-default);
+}
+
+.person__details {
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
+}
+
+::slotted([slot="description"]) {
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
+	margin-block-start: var(--g-spacing-xs);
+}

package/src/components/person/person.js

@@ -0,0 +1,8 @@
+import { GrantCodesPerson } from "./person.component.js";
+
+export * from "./person.component.js";
+export default GrantCodesPerson;
+
+if (!customElements.get("grantcodes-person")) {
+	customElements.define("grantcodes-person", GrantCodesPerson);
+}

package/src/components/person/person.react.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesPerson } from "./person.js";
+
+export const Person = createComponent({
+	tagName: "grantcodes-person",
+	elementClass: GrantCodesPerson,
+	react: React,
+});

package/src/components/person/person.stories.js

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-person");
+import "./person.js";
+
+const meta = {
+	title: "Components/Person",
+	component: "grantcodes-person",
+	args: {
+		...args,
+		name: "Tommy Tobasco",
+		role: "Designer",
+		company: "GrantCodes",
+		avatar: "https://placehold.co/160x160",
+		size: "small",
+	},
+	argTypes,
+	render: (storyArgs) => template(storyArgs),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {};
+
+export const Initials = {
+	args: {
+		avatar: undefined,
+	},
+};
+
+export const WithDescription = {
+	args: {
+		name: "Sam Torres",
+		role: "CTO",
+		company: "Flowbase",
+		avatar: "https://i.pravatar.cc/80?img=12",
+		size: "medium",
+	},
+	render: (storyArgs) => html`
+		<grantcodes-person
+			name="${storyArgs.name}"
+			role="${storyArgs.role}"
+			company="${storyArgs.company}"
+			avatar="${storyArgs.avatar}"
+			size="${storyArgs.size}"
+		>
+			<span slot="description"
+				>Writes about engineering culture, distributed teams, and systems
+				thinking.</span
+			>
+		</grantcodes-person>
+	`,
+};

package/src/components/person/person.test.js

@@ -0,0 +1,69 @@
+import { afterEach, describe, it } from "node:test";
+import { strict as assert } from "node:assert";
+import { cleanup, fixture } from "../../test-utils/index.js";
+import "./person.js";
+
+describe("Person Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render name and details", async () => {
+		element = await fixture("grantcodes-person", {
+			name: "Jane Doe",
+			role: "Designer",
+			company: "GrantCodes",
+		});
+
+		assert.strictEqual(
+			element.shadowRoot.querySelector(".person__name")?.textContent,
+			"Jane Doe",
+		);
+		assert.strictEqual(
+			element.shadowRoot.querySelector(".person__details")?.textContent,
+			"Designer, GrantCodes",
+		);
+	});
+
+	it("should omit details when role and company are missing", async () => {
+		element = await fixture("grantcodes-person", {
+			name: "Jane Doe",
+		});
+
+		assert.equal(
+			element.shadowRoot.querySelector(".person__details"),
+			null,
+		);
+	});
+
+	it("should render content in the description slot", async () => {
+		element = await fixture("grantcodes-person", {
+			name: "Jane Doe",
+		});
+
+		const description = document.createElement("span");
+		description.setAttribute("slot", "description");
+		description.textContent = "A short bio about Jane";
+		element.appendChild(description);
+
+		await element.updateComplete;
+
+		const slot = element.shadowRoot.querySelector(
+			'slot[name="description"]',
+		);
+		assert.ok(slot, "description slot should exist");
+
+		const assignedNodes = slot.assignedNodes({ flatten: true });
+		const hasText = assignedNodes.some(
+			(node) =>
+				node.textContent &&
+				node.textContent.includes("A short bio about Jane"),
+		);
+		assert.ok(
+			hasText,
+			"description slot should contain the projected text",
+		);
+	});
+});

package/src/components/pricing/pricing.component.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import pricingStyles from "./pricing.css" with { type: "css" };
 import "../button/button.js";
+import "../container/container.js";
 
 export class GrantCodesPricing extends LitElement {
 	static styles = [pricingStyles];
@@ -43,7 +44,7 @@ export class GrantCodesPricing extends LitElement {
 		const tiers = this._tiers;
 		return html`
 			<section class="pricing">
-				<div class="pricing__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="pricing__title">${this.title}</h2>`
@@ -112,7 +113,7 @@ export class GrantCodesPricing extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/pricing/pricing.css

@@ -9,35 +9,28 @@
 }
 
 .pricing {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-}
-
-.pricing__container {
-	max-width: 1200px;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-3xl);
 }
 
 .pricing__title {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	font-size: var(--g-theme-typography-h4-font-size);
-	font-weight: var(--g-theme-typography-h4-font-weight);
+	margin: 0 0 var(--g-spacing-sm);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .pricing__subtitle {
-	margin: 0 auto var(--g-theme-spacing-2xl);
-	font-size: var(--g-theme-typography-body-lg-font-size);
+	margin: 0 auto var(--g-spacing-2xl);
+	font: var(--g-typography-body-lg-font);
 	text-align: center;
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	max-width: 55ch;
 }
 
 .pricing__grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 	align-items: start;
 	padding: 0;
 	margin: 0;
@@ -47,58 +40,57 @@
 .pricing__tier {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-lg);
-	padding: var(--g-theme-spacing-xl);
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
-	background: var(--g-theme-color-background-default);
+	gap: var(--g-spacing-lg);
+	padding: var(--g-spacing-xl);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
+	background: var(--g-color-background-default);
 }
 
 .pricing__tier--highlighted {
-	border-color: var(--g-theme-color-border-primary, #7c3aed);
-	background: var(--g-theme-color-background-subtle);
-	box-shadow: var(--g-theme-shadow-lg);
+	border-color: var(--g-color-border-primary);
+	background: var(--g-color-background-subtle);
+	box-shadow: var(--g-box-shadow-lg);
 }
 
 .pricing__tier-header {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .pricing__tier-name {
 	margin: 0;
-	font-size: var(--g-theme-typography-body-lg-font-size);
-	font-weight: var(--g-theme-typography-label-lg-font-weight);
-	color: var(--g-theme-color-content-default);
+	font: var(--g-typography-body-lg-font);
+	color: var(--g-color-content-default);
 }
 
 .pricing__price-wrap {
 	display: flex;
 	align-items: baseline;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 }
 
 .pricing__price {
 	font: var(--g-typography-h2-font);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .pricing__period {
-	font-size: var(--g-theme-typography-body-default-font-size);
-	color: var(--g-theme-color-content-subtle);
+	font-size: var(--g-typography-body-default-font-size);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__tier-desc {
 	margin: 0;
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__features {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -108,24 +100,24 @@
 .pricing__feature {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	font-size: var(--g-theme-typography-body-default-font-size);
-	color: var(--g-theme-color-content-default);
+	gap: var(--g-spacing-sm);
+	font-size: var(--g-typography-body-default-font-size);
+	color: var(--g-color-content-default);
 }
 
 .pricing__feature--excluded {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	text-decoration: line-through;
 }
 
 .pricing__feature-icon {
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-primary);
 	flex-shrink: 0;
 }
 
 .pricing__feature--excluded .pricing__feature-icon {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__cta {

package/src/components/sidebar/sidebar.css

@@ -12,8 +12,8 @@
 	position: relative;
 	inline-size: var(--sidebar-width, 280px);
 	block-size: 100%;
-	background-color: var(--g-theme-color-background-default);
-	border-inline-end: 1px solid var(--g-theme-color-border-default);
+	background-color: var(--g-color-background-default);
+	border-inline-end: 1px solid var(--g-color-border-default);
 	overflow-y: auto;
 	transition: inline-size 0.3s ease;
 	flex-shrink: 0;
@@ -21,7 +21,7 @@
 
 .sidebar--right {
 	border-inline-end: none;
-	border-inline-start: 1px solid var(--g-theme-color-border-default);
+	border-inline-start: 1px solid var(--g-color-border-default);
 }
 
 .sidebar--collapsed {
@@ -29,7 +29,7 @@
 }
 
 .sidebar--collapsed .sidebar__content {
-	padding-inline: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-spacing-sm);
 }
 
 .sidebar--collapsed
@@ -48,23 +48,23 @@
 	all: unset;
 	display: none;
 	position: fixed;
-	inset-block-start: var(--g-theme-spacing-md);
-	inset-inline-start: var(--g-theme-spacing-md);
+	inset-block-start: var(--g-spacing-md);
+	inset-inline-start: var(--g-spacing-md);
 	z-index: 1001;
 	inline-size: 2.5rem;
 	block-size: 2.5rem;
 	align-items: center;
 	justify-content: center;
-	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);
+	background-color: var(--g-color-background-default);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	font-size: var(--g-theme-typography-h5-font-size);
+	font-size: var(--g-typography-h5-font-size);
 	transition: all 0.2s ease;
 }
 
 .sidebar__mobile-toggle:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Show mobile toggle on small screens */
@@ -127,29 +127,29 @@
 .sidebar__toggle {
 	all: unset;
 	position: absolute;
-	inset-block-start: var(--g-theme-spacing-md);
-	inset-inline-end: var(--g-theme-spacing-sm);
+	inset-block-start: var(--g-spacing-md);
+	inset-inline-end: var(--g-spacing-sm);
 	inline-size: 1.5rem;
 	block-size: 1.5rem;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	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);
+	background-color: var(--g-color-background-default);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	font-size: var(--g-typography-font-size-14);
+	font-size: var(--g-typography-body-sm-font-size);
 	transition: all 0.2s ease;
 	z-index: 10;
 }
 
 .sidebar__toggle:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 .sidebar--right .sidebar__toggle {
 	inset-inline-end: auto;
-	inset-inline-start: var(--g-theme-spacing-sm);
+	inset-inline-start: var(--g-spacing-sm);
 }
 
 .sidebar--right.sidebar--collapsed .sidebar__toggle {
@@ -166,8 +166,8 @@
 
 /* Content */
 .sidebar__content {
-	padding-block: var(--g-theme-spacing-md);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
 }
 
 /* View transitions */

package/src/components/stats/stats.component.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import statsStyles from "./stats.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesStats extends LitElement {
 	static styles = [statsStyles];
@@ -41,7 +42,7 @@ export class GrantCodesStats extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="stats">
-				<div class="stats__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="stats__title">${this.title}</h2>`
@@ -66,7 +67,7 @@ export class GrantCodesStats extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/stats/stats.css

@@ -9,28 +9,21 @@
 }
 
 .stats {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-subtle);
-}
-
-.stats__container {
-	max-width: 1200px;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-3xl);
+	background: var(--g-color-background-subtle);
 }
 
 .stats__title {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	font-size: var(--g-theme-typography-h4-font-size);
-	font-weight: var(--g-theme-typography-h4-font-weight);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .stats__grid {
 	display: grid;
 	grid-template-columns: repeat(var(--columns, 4), 1fr);
-	gap: var(--g-theme-spacing-xl);
+	gap: var(--g-spacing-xl);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -46,23 +39,22 @@
 .stats__item {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 }
 
 .stats__value {
-	font: var(--g-theme-typography-h2);
+	font: var(--g-typography-h2);
 	white-space: nowrap;
 	line-height: 1;
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	color: var(--g-color-content-primary, #7c3aed);
 }
 
 .stats__label {
-	font-size: var(--g-theme-typography-label-default-font-size);
-	font-weight: var(--g-theme-typography-label-default-font-weight);
-	color: var(--g-theme-color-content-default);
+    font: var(--g-typography-h5-font);
+	color: var(--g-color-content-default);
 }
 
 .stats__context {
-	font-size: var(--g-theme-typography-body-sm-font-size);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
 }