@grantcodes/ui 2.15.6 → 2.16.0

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

@@ -1,27 +1,28 @@
-import { html } from "lit";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-person");
-import "./person.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+
+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,
-		},
-	},
+  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;
@@ -29,20 +30,20 @@ export default meta;
 export const Default = {};
 
 export const Initials = {
-	args: {
-		avatar: undefined,
-	},
+  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`
+  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}"

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

@@ -1,69 +1,56 @@
-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",
-		);
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+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/index.js

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

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

@@ -1,108 +1,96 @@
-import { LitElement, html } from "lit";
-import pricingStyles from "./pricing.css" with { type: "css" };
-import "../button/button.js";
-import "../container/container.js";
+import { html, LitElement } 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];
+  static styles = [pricingStyles];
 
-	static properties = {
-		/**
-		 * Optional section heading.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Optional supporting text below the heading.
-		 * @type {string}
-		 */
-		subtitle: { type: String },
-		/**
-		 * Pricing tiers as a JSON string array.
-		 * Each tier: `{"name":"...","price":"...","period":"...","description":"...","features":[{"text":"...","included":true}],"cta":{"label":"...","href":"..."},"highlighted":false}`.
-		 * @type {string}
-		 */
-		tiers: { type: String },
-	};
+  static properties = {
+    /**
+     * Optional section heading.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Optional supporting text below the heading.
+     * @type {string}
+     */
+    subtitle: { type: String },
+    /**
+     * Pricing tiers as a JSON string array.
+     * Each tier: `{"name":"...","price":"...","period":"...","description":"...","features":[{"text":"...","included":true}],"cta":{"label":"...","href":"..."},"highlighted":false}`.
+     * @type {string}
+     */
+    tiers: { type: String },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.subtitle = "";
-		this.tiers = "[]";
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.subtitle = '';
+    this.tiers = '[]';
+  }
 
-	get _tiers() {
-		try {
-			return JSON.parse(this.tiers);
-		} catch {
-			return [];
-		}
-	}
+  get _tiers() {
+    try {
+      return JSON.parse(this.tiers);
+    } catch {
+      return [];
+    }
+  }
 
-	render() {
-		const tiers = this._tiers;
-		return html`
+  render() {
+    const tiers = this._tiers;
+    return html`
 			<section class="pricing">
 				<grantcodes-container>
-					${
-						this.title
-							? html`<h2 class="pricing__title">${this.title}</h2>`
-							: null
-					}
-					${
-						this.subtitle
-							? html`<p class="pricing__subtitle">${this.subtitle}</p>`
-							: null
-					}
+					${this.title ? html`<h2 class="pricing__title">${this.title}</h2>` : null}
+					${this.subtitle ? html`<p class="pricing__subtitle">${this.subtitle}</p>` : null}
 					<ul class="pricing__grid" role="list">
 						${tiers.map(
-							(tier) => html`
+              (tier) => html`
 								<li
-									class="pricing__tier${
-										tier.highlighted ? " pricing__tier--highlighted" : ""
-									}"
+									class="pricing__tier${tier.highlighted ? ' pricing__tier--highlighted' : ''}"
 								>
 									<div class="pricing__tier-header">
 										<h3 class="pricing__tier-name">${tier.name}</h3>
 										<div class="pricing__price-wrap">
 											<span class="pricing__price">${tier.price}</span>
 											${
-												tier.period
-													? html`<span class="pricing__period"
+                        tier.period
+                          ? html`<span class="pricing__period"
 														>/${tier.period}</span
 													>`
-													: null
-											}
+                          : null
+                      }
 										</div>
 										${
-											tier.description
-												? html`<p class="pricing__tier-desc">
+                      tier.description
+                        ? html`<p class="pricing__tier-desc">
 													${tier.description}
 												</p>`
-												: null
-										}
+                        : null
+                    }
 									</div>
 									<ul class="pricing__features" role="list">
 										${(tier.features ?? []).map(
-											(feature) => html`
+                      (feature) => html`
 												<li
 													class="pricing__feature${
-														feature.included
-															? ""
-															: " pricing__feature--excluded"
-													}"
+                            feature.included ? '' : ' pricing__feature--excluded'
+                          }"
 												>
 													<span
 														class="pricing__feature-icon"
 														aria-hidden="true"
 													>
-														${feature.included ? "✓" : "✗"}
+														${feature.included ? '✓' : '✗'}
 													</span>
 													${feature.text}
 												</li>
 											`,
-										)}
+                    )}
 									</ul>
 									<div class="pricing__cta">
 										<grantcodes-button href=${tier.cta.href}
@@ -111,10 +99,10 @@ export class GrantCodesPricing extends LitElement {
 									</div>
 								</li>
 							`,
-						)}
+            )}
 					</ul>
 				</grantcodes-container>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/pricing/pricing.css

@@ -1,129 +1,129 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .pricing {
-	padding-block: var(--g-spacing-3xl);
+  padding-block: var(--g-spacing-3xl);
 }
 
 .pricing__title {
-	margin: 0 0 var(--g-spacing-sm);
-	font: var(--g-typography-h3-font);
-	text-align: center;
-	color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-sm);
+  font: var(--g-typography-h3-font);
+  text-align: center;
+  color: var(--g-color-content-default);
 }
 
 .pricing__subtitle {
-	margin: 0 auto var(--g-spacing-2xl);
-	font: var(--g-typography-body-lg-font);
-	text-align: center;
-	color: var(--g-color-content-subtle);
-	max-width: 55ch;
+  margin: 0 auto var(--g-spacing-2xl);
+  font: var(--g-typography-body-lg-font);
+  text-align: center;
+  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-spacing-lg);
-	align-items: start;
-	padding: 0;
-	margin: 0;
-	list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--g-spacing-lg);
+  align-items: start;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 .pricing__tier {
-	display: flex;
-	flex-direction: column;
-	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);
+  display: flex;
+  flex-direction: column;
+  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-color-border-primary);
-	background: var(--g-color-background-subtle);
-	box-shadow: var(--g-box-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-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
 }
 
 .pricing__tier-name {
-	margin: 0;
-	font: var(--g-typography-body-lg-font);
-	color: var(--g-color-content-default);
+  margin: 0;
+  font: var(--g-typography-body-lg-font);
+  color: var(--g-color-content-default);
 }
 
 .pricing__price-wrap {
-	display: flex;
-	align-items: baseline;
-	gap: var(--g-spacing-xs);
+  display: flex;
+  align-items: baseline;
+  gap: var(--g-spacing-xs);
 }
 
 .pricing__price {
-	font: var(--g-typography-h2-font);
-	color: var(--g-color-content-default);
+  font: var(--g-typography-h2-font);
+  color: var(--g-color-content-default);
 }
 
 .pricing__period {
-	font-size: var(--g-typography-body-default-font-size);
-	color: var(--g-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-typography-body-sm);
-	color: var(--g-color-content-subtle);
+  margin: 0;
+  font: var(--g-typography-body-sm);
+  color: var(--g-color-content-subtle);
 }
 
 .pricing__features {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
-	padding: 0;
-	margin: 0;
-	list-style: none;
-	flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  flex: 1;
 }
 
 .pricing__feature {
-	display: flex;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	font-size: var(--g-typography-body-default-font-size);
-	color: var(--g-color-content-default);
+  display: flex;
+  align-items: center;
+  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-color-content-subtle);
-	text-decoration: line-through;
+  color: var(--g-color-content-subtle);
+  text-decoration: line-through;
 }
 
 .pricing__feature-icon {
-	font: var(--g-typography-body-sm);
-	color: var(--g-color-content-primary);
-	flex-shrink: 0;
+  font: var(--g-typography-body-sm);
+  color: var(--g-color-content-primary);
+  flex-shrink: 0;
 }
 
 .pricing__feature--excluded .pricing__feature-icon {
-	color: var(--g-color-content-subtle);
+  color: var(--g-color-content-subtle);
 }
 
 .pricing__cta {
-	margin-top: auto;
+  margin-top: auto;
 }
 
 .pricing__cta grantcodes-button {
-	width: 100%;
+  width: 100%;
 }

package/src/components/pricing/pricing.js

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

package/src/components/pricing/pricing.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesPricing } from "./pricing.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesPricing } from './pricing.js';
 
 export const Pricing = createComponent({
-	tagName: "grantcodes-pricing",
-	elementClass: GrantCodesPricing,
-	react: React,
+  tagName: 'grantcodes-pricing',
+  elementClass: GrantCodesPricing,
+  react: React,
 });