@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/tabs/tabs.test.js

@@ -1,148 +1,202 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./tabs.js";
-import "./tab.js";
-
-describe("Tabs Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-tabs");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have label property", async () => {
-		element = await fixture("grantcodes-tabs", {
-			label: "Navigation tabs",
-		});
-
-		assert.strictEqual(element.label, "Navigation tabs", "Label should be set");
-	});
-
-	it("should render tabs wrapper", async () => {
-		element = await fixture("grantcodes-tabs");
-		const tabs = element.shadowRoot.querySelector(".tabs");
-		assert.ok(tabs, "Tabs wrapper should exist");
-	});
-
-	it("should render tablist with role", async () => {
-		element = await fixture("grantcodes-tabs");
-		const tablist = element.shadowRoot.querySelector('[role="tablist"]');
-		assert.ok(tablist, "Tablist should exist with role");
-		assert.ok(
-			tablist.classList.contains("tabs__tablist"),
-			"Should have tablist class",
-		);
-	});
-
-	it("should render panels container", async () => {
-		element = await fixture("grantcodes-tabs");
-		const panels = element.shadowRoot.querySelector(".tabs__panels");
-		assert.ok(panels, "Panels container should exist");
-	});
-
-	it("should have slot for tab panels", async () => {
-		element = await fixture("grantcodes-tabs");
-		const slot = element.shadowRoot.querySelector(".tabs__panels slot");
-		assert.ok(slot, "Slot should exist for tab panels");
-	});
-
-	it("should generate unique ID", async () => {
-		const element1 = await fixture("grantcodes-tabs");
-		const element2 = await fixture("grantcodes-tabs");
-
-		assert.notStrictEqual(element1.id, element2.id, "IDs should be unique");
-
-		cleanup(element1);
-		cleanup(element2);
-	});
-
-	it("should initialize tabs array", async () => {
-		element = await fixture("grantcodes-tabs");
-		assert.ok(Array.isArray(element.tabs), "Tabs should be an array");
-	});
-
-	it("should initialize tabButtons array", async () => {
-		element = await fixture("grantcodes-tabs");
-		assert.ok(
-			Array.isArray(element.tabButtons),
-			"Tab buttons should be an array",
-		);
-	});
-
-	it("should have focusedTabIndex property", async () => {
-		element = await fixture("grantcodes-tabs");
-		// After firstUpdated, if there are tabs, _focusedTabIndex will be set to 0
-		// If there are no tabs, it should remain -1
-		// Since we're not adding tabs, it should remain -1, but firstUpdated may have run
-		// Check that the property exists and is a number
-		assert.ok(
-			typeof element._focusedTabIndex === "number",
-			"Should have focusedTabIndex property",
-		);
-	});
-
-	it("should support keyboard navigation", async () => {
-		element = await fixture("grantcodes-tabs");
-		// The handleTabKeyDown method handles ArrowRight and ArrowLeft
-		assert.ok(
-			element.handleTabKeyDown,
-			"Should have keyboard navigation handler",
-		);
-	});
-
-	it("should set aria-label on tablist when label is provided", async () => {
-		element = await fixture("grantcodes-tabs", {
-			label: "Main navigation",
-		});
-
-		const tablist = element.shadowRoot.querySelector('[role="tablist"]');
-		assert.strictEqual(
-			tablist.getAttribute("aria-label"),
-			"Main navigation",
-			"Tablist should have aria-label",
-		);
-	});
-
-	it("should manage active tab state", async () => {
-		element = await fixture("grantcodes-tabs");
-
-		// Create and add tab elements
-		const tab1 = document.createElement("grantcodes-tab");
-		tab1.label = "Tab 1";
-		const tab2 = document.createElement("grantcodes-tab");
-		tab2.label = "Tab 2";
-
-		element.appendChild(tab1);
-		element.appendChild(tab2);
-
-		await element.updateComplete;
-
-		// The tabs are initialized in firstUpdated
-		// Check that activeTab getter works
-		assert.ok(element.activeTab !== undefined, "Should have activeTab getter");
-	});
-
-	it("should render tab buttons for each tab", async () => {
-		element = await fixture("grantcodes-tabs");
-
-		const tab1 = document.createElement("grantcodes-tab");
-		tab1.label = "First";
-		const tab2 = document.createElement("grantcodes-tab");
-		tab2.label = "Second";
-
-		element.appendChild(tab1);
-		element.appendChild(tab2);
-
-		await element.updateComplete;
-
-		// Tab buttons are rendered via renderTabButtons method
-		// In a real browser, these would be visible in the shadow DOM
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './tabs.js';
+import './tab.js';
+
+describe('Tabs Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-tabs');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have label property', async () => {
+    element = await fixture('grantcodes-tabs', {
+      label: 'Navigation tabs',
+    });
+
+    assert.strictEqual(element.label, 'Navigation tabs', 'Label should be set');
+  });
+
+  it('should render tabs wrapper', async () => {
+    element = await fixture('grantcodes-tabs');
+    const tabs = element.shadowRoot.querySelector('.tabs');
+    assert.ok(tabs, 'Tabs wrapper should exist');
+  });
+
+  it('should render tablist with role', async () => {
+    element = await fixture('grantcodes-tabs');
+    const tablist = element.shadowRoot.querySelector('[role="tablist"]');
+    assert.ok(tablist, 'Tablist should exist with role');
+    assert.ok(tablist.classList.contains('tabs__tablist'), 'Should have tablist class');
+  });
+
+  it('should render panels container', async () => {
+    element = await fixture('grantcodes-tabs');
+    const panels = element.shadowRoot.querySelector('.tabs__panels');
+    assert.ok(panels, 'Panels container should exist');
+  });
+
+  it('should have slot for tab panels', async () => {
+    element = await fixture('grantcodes-tabs');
+    const slot = element.shadowRoot.querySelector('.tabs__panels slot');
+    assert.ok(slot, 'Slot should exist for tab panels');
+  });
+
+  it('should generate unique ID', async () => {
+    const element1 = await fixture('grantcodes-tabs');
+    const element2 = await fixture('grantcodes-tabs');
+
+    assert.notStrictEqual(element1.id, element2.id, 'IDs should be unique');
+
+    cleanup(element1);
+    cleanup(element2);
+  });
+
+  it('should initialize tabs array', async () => {
+    element = await fixture('grantcodes-tabs');
+    assert.ok(Array.isArray(element.tabs), 'Tabs should be an array');
+  });
+
+  it('should initialize tabButtons array', async () => {
+    element = await fixture('grantcodes-tabs');
+    assert.ok(Array.isArray(element.tabButtons), 'Tab buttons should be an array');
+  });
+
+  it('should have focusedTabIndex property', async () => {
+    element = await fixture('grantcodes-tabs');
+    // After firstUpdated, if there are tabs, _focusedTabIndex will be set to 0
+    // If there are no tabs, it should remain -1
+    // Since we're not adding tabs, it should remain -1, but firstUpdated may have run
+    // Check that the property exists and is a number
+    assert.ok(typeof element._focusedTabIndex === 'number', 'Should have focusedTabIndex property');
+  });
+
+  it('should support keyboard navigation', async () => {
+    element = await fixture('grantcodes-tabs');
+    // The handleTabKeyDown method handles ArrowRight and ArrowLeft
+    assert.ok(element.handleTabKeyDown, 'Should have keyboard navigation handler');
+  });
+
+  it('should set aria-label on tablist when label is provided', async () => {
+    element = await fixture('grantcodes-tabs', {
+      label: 'Main navigation',
+    });
+
+    const tablist = element.shadowRoot.querySelector('[role="tablist"]');
+    assert.strictEqual(
+      tablist.getAttribute('aria-label'),
+      'Main navigation',
+      'Tablist should have aria-label',
+    );
+  });
+
+  it('should manage active tab state', async () => {
+    element = await fixture('grantcodes-tabs');
+
+    // Create and add tab elements
+    const tab1 = document.createElement('grantcodes-tab');
+    tab1.label = 'Tab 1';
+    const tab2 = document.createElement('grantcodes-tab');
+    tab2.label = 'Tab 2';
+
+    element.appendChild(tab1);
+    element.appendChild(tab2);
+
+    await element.updateComplete;
+
+    // The tabs are initialized in firstUpdated
+    // Check that activeTab getter works
+    assert.ok(element.activeTab !== undefined, 'Should have activeTab getter');
+  });
+
+  it('should render tab buttons for each tab', async () => {
+    element = await fixture('grantcodes-tabs');
+
+    const tab1 = document.createElement('grantcodes-tab');
+    tab1.label = 'First';
+    const tab2 = document.createElement('grantcodes-tab');
+    tab2.label = 'Second';
+
+    element.appendChild(tab1);
+    element.appendChild(tab2);
+
+    await element.updateComplete;
+
+    // Tab buttons are rendered via renderTabButtons method
+    // In a real browser, these would be visible in the shadow DOM
+  });
+
+  const mountTabs = async (labels) => {
+    element = document.createElement('grantcodes-tabs');
+    element.innerHTML = labels
+      .map((label) => `<grantcodes-tab label="${label}"><p>${label}</p></grantcodes-tab>`)
+      .join('');
+    document.body.appendChild(element);
+    await element.updateComplete;
+    await element.updateComplete;
+    return {
+      buttons: Array.from(element.shadowRoot.querySelectorAll('grantcodes-tabs-button')),
+      panels: Array.from(element.querySelectorAll('grantcodes-tab')).map((tab) =>
+        tab.shadowRoot.querySelector('.tabs__panel'),
+      ),
+    };
+  };
+
+  it('should mark exactly one tab button active', async () => {
+    const { buttons } = await mountTabs(['One', 'Two', 'Three']);
+
+    assert.strictEqual(buttons.length, 3, 'One button per tab');
+    assert.strictEqual(
+      buttons.filter((button) => button.active).length,
+      1,
+      'Exactly one tab may be active',
+    );
+    assert.strictEqual(buttons[0].active, true, 'The first tab is active by default');
+
+    const highlighted = buttons.filter((button) =>
+      button.shadowRoot.querySelector('button').classList.contains('is-active'),
+    );
+    assert.strictEqual(highlighted.length, 1, 'Exactly one tab button carries the highlight');
+  });
+
+  it('should pair each tab button with its own panel', async () => {
+    const { buttons, panels } = await mountTabs(['One', 'Two']);
+
+    buttons.forEach((button, index) => {
+      const inner = button.shadowRoot.querySelector('button');
+      assert.strictEqual(
+        inner.getAttribute('aria-controls'),
+        panels[index].id,
+        `Button ${index} must control its own panel`,
+      );
+      assert.strictEqual(
+        panels[index].getAttribute('aria-labelledby'),
+        inner.id,
+        `Panel ${index} must be labelled by its own button`,
+      );
+    });
+  });
+
+  it('should switch panels when another tab button is clicked', async () => {
+    const { buttons, panels } = await mountTabs(['One', 'Two']);
+
+    buttons[1].click();
+    await element.updateComplete;
+
+    assert.deepStrictEqual(
+      panels.map((panel) => panel.classList.contains('is-active')),
+      [false, true],
+      'Only the clicked panel stays visible',
+    );
+    assert.strictEqual(buttons[1].active, true, 'Clicked button is active');
+    assert.strictEqual(buttons[0].active, false, 'Other button is no longer active');
+  });
 });

package/src/components/testimonials/index.js

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

package/src/components/testimonials/testimonials.component.js

@@ -1,61 +1,57 @@
-import { LitElement, html } from "lit";
-import testimonialsStyles from "./testimonials.css" with { type: "css" };
-import "../card/card.js";
-import "../person/person.js";
-import "../container/container.js";
+import { html, LitElement } from 'lit';
+import testimonialsStyles from './testimonials.css' with { type: 'css' };
+import '../card/card.js';
+import '../person/person.js';
+import '../container/container.js';
 
 export class GrantCodesTestimonials extends LitElement {
-	static styles = [testimonialsStyles];
+  static styles = [testimonialsStyles];
 
-	static properties = {
-		/**
-		 * Optional section heading.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Testimonial items as a JSON string array: `[{"quote":"...","name":"...","role":"...","company":"...","avatar":"..."}]`.
-		 * @type {string}
-		 */
-		items: { type: String },
-		/**
-		 * Display layout of the testimonials.
-		 * @type {'cards' | 'list'}
-		 */
-		layout: { type: String, reflect: true },
-	};
+  static properties = {
+    /**
+     * Optional section heading.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Testimonial items as a JSON string array: `[{"quote":"...","name":"...","role":"...","company":"...","avatar":"..."}]`.
+     * @type {string}
+     */
+    items: { type: String },
+    /**
+     * Display layout of the testimonials.
+     * @type {'cards' | 'list'}
+     */
+    layout: { type: String, reflect: true },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.items = "[]";
-		this.layout = "cards";
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.items = '[]';
+    this.layout = 'cards';
+  }
 
-	get _items() {
-		try {
-			return JSON.parse(this.items);
-		} catch {
-			return [];
-		}
-	}
+  get _items() {
+    try {
+      return JSON.parse(this.items);
+    } catch {
+      return [];
+    }
+  }
 
-	render() {
-		const items = this._items;
-		return html`
+  render() {
+    const items = this._items;
+    return html`
 			<section class="testimonials">
 				<grantcodes-container>
-					${
-						this.title
-							? html`<h2 class="testimonials__title">${this.title}</h2>`
-							: null
-					}
+					${this.title ? html`<h2 class="testimonials__title">${this.title}</h2>` : null}
 					<ul
 						class="testimonials__grid testimonials__grid--${this.layout}"
 						role="list"
 					>
 						${items.map(
-							(item) => html`
+              (item) => html`
 								<li class="testimonials__item">
 									<grantcodes-card>
 										<blockquote class="testimonials__quote" slot="header">
@@ -65,20 +61,20 @@ export class GrantCodesTestimonials extends LitElement {
 										</blockquote>
 										<footer class="testimonials__attribution" slot="footer">
 											<grantcodes-person
-												name=${item.name ?? ""}
-												role=${item.role ?? ""}
-												company=${item.company ?? ""}
-												avatar=${item.avatar ?? ""}
+												name=${item.name ?? ''}
+												role=${item.role ?? ''}
+												company=${item.company ?? ''}
+												avatar=${item.avatar ?? ''}
 												size="small"
 											></grantcodes-person>
 										</footer>
 									</grantcodes-card>
 								</li>
 							`,
-						)}
+            )}
 					</ul>
 				</grantcodes-container>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/testimonials/testimonials.css

@@ -1,59 +1,59 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .testimonials {
-	padding-block: var(--g-spacing-3xl);
+  padding-block: var(--g-spacing-3xl);
 }
 
 .testimonials__title {
-	margin: 0 0 var(--g-spacing-2xl);
-	font: var(--g-typography-h3-font);
-	text-align: center;
-	color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-2xl);
+  font: var(--g-typography-h3-font);
+  text-align: center;
+  color: var(--g-color-content-default);
 }
 
 .testimonials__grid--cards {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: var(--g-spacing-lg);
-	padding: 0;
-	margin: 0;
-	list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--g-spacing-lg);
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 .testimonials__grid--list {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-xl);
-	max-width: 65ch;
-	margin: 0 auto;
-	padding: 0;
-	list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-xl);
+  max-width: 65ch;
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
 }
 
 .testimonials__quote {
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-lg);
-	height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-lg);
+  height: 100%;
 }
 
 .testimonials__text {
-	margin: 0;
-	font: var(--g-typography-body-default);
-	font-style: italic;
-	color: var(--g-color-content-default);
-	flex: 1;
+  margin: 0;
+  font: var(--g-typography-body-default);
+  font-style: italic;
+  color: var(--g-color-content-default);
+  flex: 1;
 }
 
 .testimonials__attribution {
-	margin-top: auto;
+  margin-top: auto;
 }

package/src/components/testimonials/testimonials.js

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

package/src/components/testimonials/testimonials.react.js

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