@grantcodes/ui 2.12.0 → 2.15.2

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

@@ -7,7 +7,7 @@
 .form-field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 	padding: 0;
 	margin: 0;
 	border: none;
@@ -24,7 +24,7 @@
 	flex-direction: row-reverse;
 	align-items: center;
 	justify-content: flex-end;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .form-field__label {
@@ -32,17 +32,17 @@
 	padding: 0;
 
 	&:where(legend) {
-		margin-bottom: var(--g-theme-spacing-xs);
+		margin-bottom: var(--g-spacing-xs);
 	}
 }
 
 .form-field__help {
-	font-size: var(--g-theme-typography-body-sm-font-size);
+	font-size: var(--g-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);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-color-content-utility-error);
 }

package/src/components/hero/hero.css

@@ -14,10 +14,10 @@
 	justify-content: center;
 	align-items: center;
 	min-height: 50vh;
-	padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-2xl) var(--g-spacing-md);
 	background: linear-gradient(
 		135deg,
-		var(--g-theme-color-background-primary-knockout),
+		var(--g-color-background-primary-knockout),
 		var(--g-color-primary-900)
 	);
 }
@@ -25,7 +25,7 @@
 .hero__container {
 	width: 100%;
 	max-width: 65ch;
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 }
 
 :host([center]) .hero {
@@ -38,24 +38,24 @@
 
 .hero__title {
 	font: var(--g-typography-h1-font);
-	color: var(--g-theme-color-content-primary-knockout);
+	color: var(--g-color-content-primary-knockout);
 }
 
 .hero__text {
-	font: var(--g-typography-body-lg);
-	color: var(--g-theme-color-content-primary-knockout);
+	font: var(--g-typography-body-lg-font);
+	color: var(--g-color-content-primary-knockout);
 }
 
 :host([size="sm"]) .hero {
 	min-height: 30vh;
-	padding: var(--g-theme-spacing-xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-xl) var(--g-spacing-md);
 }
 
 :host([size="lg"]) .hero {
 	min-height: 70vh;
-	padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-3xl) var(--g-spacing-md);
 }
 
 ::slotted(*) {
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	color: var(--g-color-content-primary-knockout, #ffffff);
 }

package/src/components/loading/loading.css

@@ -18,12 +18,12 @@
 	overflow: hidden;
 	padding-top: var(--height);
 	background-repeat: no-repeat;
-	background-color: var(--g-theme-color-primary-500);
+	background-color: var(--g-color-primary-500);
 	background-image: linear-gradient(
 		to right,
 		transparent 0%,
-		var(--g-color-neutral-500) 10%,
-		var(--g-color-neutral-500) 90%,
+		var(--g-color-background-shimmer) 10%,
+		var(--g-color-background-shimmer) 90%,
 		transparent 100%
 	);
 	background-size: var(--inner-width) 100%;

package/src/components/logo-cloud/logo-cloud.css

@@ -9,10 +9,10 @@
 }
 
 .logo-cloud {
-	padding-block: var(--g-theme-spacing-2xl);
-	padding-inline: var(--g-theme-spacing-md);
-	border-top: 1px solid var(--g-theme-color-border-default);
-	border-bottom: 1px solid var(--g-theme-color-border-default);
+	padding-block: var(--g-spacing-2xl);
+	padding-inline: var(--g-spacing-md);
+	border-top: 1px solid var(--g-color-border-default);
+	border-bottom: 1px solid var(--g-color-border-default);
 }
 
 .logo-cloud__container {
@@ -21,13 +21,11 @@
 }
 
 .logo-cloud__title {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	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);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-body-sm-font);
 	text-transform: uppercase;
 	text-align: center;
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 }
 
 .logo-cloud__grid {
@@ -35,7 +33,7 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: center;
-	gap: var(--g-theme-spacing-lg) var(--g-theme-spacing-2xl);
+	gap: var(--g-spacing-lg) var(--g-spacing-2xl);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -53,7 +51,7 @@
 
 .logo-cloud__logo {
 	display: block;
-	block-size: var(--g-theme-spacing-xl);
+	block-size: var(--g-spacing-xl);
 	inline-size: auto;
 	max-inline-size: 140px;
 	object-fit: contain;

package/src/components/map/map.component.js

@@ -48,31 +48,36 @@ export class GrantCodesMap extends LitElement {
 		this.label = "Map";
 		this["directions-url"] = "";
 		this.height = "";
-		this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		this._darkQuery = null;
 		this._onSchemeChange = () => this._updateFilter();
+		if (typeof window !== "undefined") {
+			this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		}
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		if (typeof window === "undefined") return;
 		this._observer = new MutationObserver(() => this._updateFilter());
 		this._observer.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: ["class"],
 		});
-		this._darkQuery.addEventListener("change", this._onSchemeChange);
+		this._darkQuery?.addEventListener("change", this._onSchemeChange);
 		this._updateFilter();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._observer?.disconnect();
-		this._darkQuery.removeEventListener("change", this._onSchemeChange);
+		this._darkQuery?.removeEventListener("change", this._onSchemeChange);
 	}
 
 	_isDark() {
+		if (typeof document === "undefined") return false;
 		if (document.documentElement.classList.contains("dark")) return true;
 		if (document.documentElement.classList.contains("light")) return false;
-		return this._darkQuery.matches;
+		return this._darkQuery?.matches ?? false;
 	}
 
 	_updateFilter() {

package/src/components/map/map.css

@@ -10,8 +10,8 @@
 
 .map {
 	position: relative;
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	overflow: hidden;
 }
 
@@ -26,16 +26,16 @@
 
 .map__directions {
 	display: block;
-	padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
-	font-size: var(--g-theme-typography-body-sm-font-size);
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	padding: var(--g-spacing-sm) var(--g-spacing-md);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-color-content-primary, #7c3aed);
 	text-decoration: none;
-	border-block-start: 1px solid var(--g-theme-color-border-default);
-	background: var(--g-theme-color-background-subtle);
+	border-block-start: 1px solid var(--g-color-border-default);
+	background: var(--g-color-background-subtle);
 	transition: background-color 0.2s ease;
 }
 
 .map__directions:hover {
-	background: var(--g-theme-color-background-subtle-hover);
+	background: var(--g-color-background-subtle-hover);
 	text-decoration: underline;
 }

package/src/components/media-text/media-text.css

@@ -9,8 +9,8 @@
 }
 
 .media-text {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
 }
 
 .media-text__container {
@@ -18,7 +18,7 @@
 	margin: 0 auto;
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	gap: var(--g-theme-spacing-3xl);
+	gap: var(--g-spacing-3xl);
 	align-items: center;
 }
 
@@ -34,7 +34,7 @@
 @media (max-width: 768px) {
 	.media-text__container {
 		grid-template-columns: 1fr;
-		gap: var(--g-theme-spacing-xl);
+		gap: var(--g-spacing-xl);
 		direction: ltr;
 	}
 }
@@ -44,7 +44,7 @@
 	inline-size: 100%;
 	block-size: auto;
 	display: block;
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	object-fit: cover;
 	aspect-ratio: 4 / 3;
 }
@@ -52,17 +52,17 @@
 .media-text__content {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 }
 
 .media-text__title {
 	margin: 0;
 	font: var(--g-typography-h4-font);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .media-text__text {
 	margin: 0;
-	font: var(--g-theme-typography-body-lg);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-lg);
+	color: var(--g-color-content-subtle);
 }

package/src/components/newsletter/newsletter.css

@@ -9,9 +9,9 @@
 }
 
 .newsletter {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-primary-knockout, #7c3aed);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
+	background: var(--g-color-background-primary-knockout);
 	text-align: center;
 }
 
@@ -21,15 +21,15 @@
 }
 
 .newsletter__title {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	font: var(--g-typography-h4-font);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: 0 0 var(--g-spacing-sm);
+	font: var(--g-typography-h3-font);
+	color: var(--g-color-content-primary-knockout);
 }
 
 .newsletter__text {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	font: var(--g-theme-typography-body-lg);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-body-lg);
+	color: var(--g-color-content-primary-knockout);
 	opacity: 0.9;
 }
 
@@ -52,35 +52,35 @@
 .newsletter__field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .newsletter__input-wrap {
 	display: flex;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .newsletter__input {
 	flex: 1;
 	min-width: 0;
-	padding-block: var(--g-theme-spacing-sm);
-	padding-inline: var(--g-theme-spacing-md);
-	font-size: var(--g-theme-typography-body-default-font-size);
+	padding-block: var(--g-spacing-sm);
+	padding-inline: var(--g-spacing-md);
+	font-size: var(--g-typography-body-default-font-size);
 	border: 2px solid transparent;
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
-	background: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
+	background: var(--g-color-background-default);
+	color: var(--g-color-content-default);
 	outline: none;
 }
 
 .newsletter__input:focus {
-	border-color: var(--g-theme-color-border-default);
+	border-color: var(--g-color-border-default);
 }
 
 .newsletter__disclaimer {
-	margin: var(--g-theme-spacing-md) 0 0;
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: var(--g-spacing-md) 0 0;
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-primary-knockout);
 	opacity: 0.75;
 }
 

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",
+		);
+	});
+});