@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/pagination/pagination.component.js

@@ -1,62 +1,62 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import paginationStyles from "./pagination.css" with { type: "css" };
-import { GrantCodesButton } from "../button/button.component.js";
-import "../button/button.js";
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import { GrantCodesButton } from '../button/button.component.js';
+import paginationStyles from './pagination.css' with { type: 'css' };
+import '../button/button.js';
 
 export class GrantCodesPagination extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
-	static styles = [paginationStyles];
-
-	static dependencies = { "grantcodes-button": GrantCodesButton };
-
-	static properties = {
-		previousHref: { attribute: "previous-href" },
-		nextHref: { attribute: "next-href" },
-		page: { type: Number },
-		pages: { type: Number },
-	};
-
-	constructor() {
-		super();
-
-		this.previousHref = "";
-		this.nextHref = "";
-		this.page = 1;
-		this.pages = 1;
-	}
-
-	nextTemplate() {
-		if (!this.nextHref) {
-			return html``;
-		}
-
-		return html`
+  // Styles are scoped to this element: they won't conflict with styles
+  // on the main page or in other components. Styling API can be exposed
+  // via CSS custom properties.
+  static styles = [paginationStyles];
+
+  static dependencies = { 'grantcodes-button': GrantCodesButton };
+
+  static properties = {
+    previousHref: { attribute: 'previous-href' },
+    nextHref: { attribute: 'next-href' },
+    page: { type: Number },
+    pages: { type: Number },
+  };
+
+  constructor() {
+    super();
+
+    this.previousHref = '';
+    this.nextHref = '';
+    this.page = 1;
+    this.pages = 1;
+  }
+
+  nextTemplate() {
+    if (!this.nextHref) {
+      return html``;
+    }
+
+    return html`
       <grantcodes-button class="pagination__next" href=${this.nextHref}
         >Next</grantcodes-button
       >
     `;
-	}
+  }
 
-	previousTemplate() {
-		if (!this.previousHref) {
-			return html``;
-		}
+  previousTemplate() {
+    if (!this.previousHref) {
+      return html``;
+    }
 
-		return html`
+    return html`
       <grantcodes-button class="pagination__previous" href=${this.previousHref}
         >Previous</grantcodes-button
       >
     `;
-	}
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
       <nav class="pagination" aria-label="Pagination navigation">
         ${this.previousTemplate()} ${this.nextTemplate()}
       </nav>
     `;
-	}
+  }
 }

package/src/components/pagination/pagination.css

@@ -1,19 +1,19 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .pagination {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .pagination__next {
-	margin-inline-start: auto;
+  margin-inline-start: auto;
 }
 
 .pagination__previous {
-	margin-inline-end: auto;
+  margin-inline-end: auto;
 }

package/src/components/pagination/pagination.js

@@ -1,7 +1,7 @@
-import { GrantCodesPagination } from "./pagination.component.js";
-import "../button/button.js";
+import { GrantCodesPagination } from './pagination.component.js';
+import '../button/button.js';
 
-export * from "./pagination.component.js";
+export * from './pagination.component.js';
 export default GrantCodesPagination;
 
-customElements.define("grantcodes-pagination", GrantCodesPagination);
+customElements.define('grantcodes-pagination', GrantCodesPagination);

package/src/components/pagination/pagination.react.js

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

package/src/components/pagination/pagination.stories.js

@@ -1,18 +1,20 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-pagination");
-import "./pagination.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-pagination');
+
+import './pagination.js';
 
 const meta = {
-	title: "Components/Pagination",
-	component: "grantcodes-pagination",
-	args: {
-		...args,
-		previousHref: "#1",
-		nextHref: "#3",
-	},
-	argTypes,
-	render: (args) => html`
+  title: 'Components/Pagination',
+  component: 'grantcodes-pagination',
+  args: {
+    ...args,
+    previousHref: '#1',
+    nextHref: '#3',
+  },
+  argTypes,
+  render: (args) => html`
 			<grantcodes-pagination
 				.previousHref=${args.previousHref}
 				.nextHref=${args.nextHref}
@@ -20,11 +22,11 @@ const meta = {
 				.pages=${args.pages ?? 1}
 			></grantcodes-pagination>
 		`,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;

package/src/components/pagination/pagination.test.js

@@ -1,103 +1,96 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./pagination.js";
-
-describe("Pagination Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-pagination");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have page property defaulting to 1", async () => {
-		element = await fixture("grantcodes-pagination");
-		assert.strictEqual(element.page, 1, "Page should default to 1");
-	});
-
-	it("should have pages property defaulting to 1", async () => {
-		element = await fixture("grantcodes-pagination");
-		assert.strictEqual(element.pages, 1, "Pages should default to 1");
-	});
-
-	it("should render navigation element", async () => {
-		element = await fixture("grantcodes-pagination", {
-			pages: 5,
-		});
-
-		const nav = element.shadowRoot.querySelector("nav");
-		assert.ok(nav, "Navigation element should exist");
-	});
-
-	it("should render pagination list", async () => {
-		element = await fixture("grantcodes-pagination", {
-			pages: 5,
-		});
-
-		const list = element.shadowRoot.querySelector(".pagination");
-		assert.ok(list, "Pagination list should exist");
-	});
-
-	it("should support href property for links", async () => {
-		element = await fixture("grantcodes-pagination", {
-			page: 2,
-			pages: 5,
-			href: "/page/{page}",
-		});
-
-		assert.strictEqual(
-			element.href,
-			"/page/{page}",
-			"Href property should be set",
-		);
-	});
-
-	it("should indicate current page", async () => {
-		element = await fixture("grantcodes-pagination", {
-			page: 3,
-			pages: 5,
-		});
-
-		assert.strictEqual(element.page, 3, "Current page should be 3");
-	});
-
-	it("should handle single page", async () => {
-		element = await fixture("grantcodes-pagination", {
-			page: 1,
-			pages: 1,
-		});
-
-		const list = element.shadowRoot.querySelector(".pagination");
-		assert.ok(list, "Should render even with single page");
-	});
-
-	it("should handle multiple pages", async () => {
-		element = await fixture("grantcodes-pagination", {
-			page: 1,
-			pages: 10,
-		});
-
-		const list = element.shadowRoot.querySelector(".pagination");
-		assert.ok(list, "Should render pagination for multiple pages");
-	});
-
-	it("should support navigation to different pages", async () => {
-		element = await fixture("grantcodes-pagination", {
-			page: 5,
-			pages: 10,
-		});
-
-		// The component should allow navigating to previous and next pages
-		assert.ok(element.page > 1, "Should be able to go to previous page");
-		assert.ok(
-			element.page < element.pages,
-			"Should be able to go to next page",
-		);
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './pagination.js';
+
+describe('Pagination Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-pagination');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have page property defaulting to 1', async () => {
+    element = await fixture('grantcodes-pagination');
+    assert.strictEqual(element.page, 1, 'Page should default to 1');
+  });
+
+  it('should have pages property defaulting to 1', async () => {
+    element = await fixture('grantcodes-pagination');
+    assert.strictEqual(element.pages, 1, 'Pages should default to 1');
+  });
+
+  it('should render navigation element', async () => {
+    element = await fixture('grantcodes-pagination', {
+      pages: 5,
+    });
+
+    const nav = element.shadowRoot.querySelector('nav');
+    assert.ok(nav, 'Navigation element should exist');
+  });
+
+  it('should render pagination list', async () => {
+    element = await fixture('grantcodes-pagination', {
+      pages: 5,
+    });
+
+    const list = element.shadowRoot.querySelector('.pagination');
+    assert.ok(list, 'Pagination list should exist');
+  });
+
+  it('should support href property for links', async () => {
+    element = await fixture('grantcodes-pagination', {
+      page: 2,
+      pages: 5,
+      href: '/page/{page}',
+    });
+
+    assert.strictEqual(element.href, '/page/{page}', 'Href property should be set');
+  });
+
+  it('should indicate current page', async () => {
+    element = await fixture('grantcodes-pagination', {
+      page: 3,
+      pages: 5,
+    });
+
+    assert.strictEqual(element.page, 3, 'Current page should be 3');
+  });
+
+  it('should handle single page', async () => {
+    element = await fixture('grantcodes-pagination', {
+      page: 1,
+      pages: 1,
+    });
+
+    const list = element.shadowRoot.querySelector('.pagination');
+    assert.ok(list, 'Should render even with single page');
+  });
+
+  it('should handle multiple pages', async () => {
+    element = await fixture('grantcodes-pagination', {
+      page: 1,
+      pages: 10,
+    });
+
+    const list = element.shadowRoot.querySelector('.pagination');
+    assert.ok(list, 'Should render pagination for multiple pages');
+  });
+
+  it('should support navigation to different pages', async () => {
+    element = await fixture('grantcodes-pagination', {
+      page: 5,
+      pages: 10,
+    });
+
+    // The component should allow navigating to previous and next pages
+    assert.ok(element.page > 1, 'Should be able to go to previous page');
+    assert.ok(element.page < element.pages, 'Should be able to go to next page');
+  });
 });

package/src/components/person/index.js

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

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

@@ -1,38 +1,38 @@
-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";
+import { html, LitElement } 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 properties = {
+    name: { type: String },
+    role: { type: String },
+    company: { type: String },
+    avatar: { type: String },
+    alt: { type: String },
+    size: { type: String },
+  };
 
-	static styles = [personStyles];
+  static styles = [personStyles];
 
-	constructor() {
-		super();
-		this.name = "";
-		this.role = "";
-		this.company = "";
-		this.avatar = "";
-		this.alt = "";
-		this.size = "medium";
-	}
+  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(", ");
-	}
+  get meta() {
+    return [this.role, this.company].filter(Boolean).join(', ');
+  }
 
-	render() {
-		const meta = this.meta;
+  render() {
+    const meta = this.meta;
 
-		return html`
+    return html`
 			<div class="person">
 				<grantcodes-avatar
 					src=${ifDefined(this.avatar || undefined)}
@@ -47,5 +47,5 @@ export class GrantCodesPerson extends LitElement {
 				</div>
 			</div>
 		`;
-	}
+  }
 }

package/src/components/person/person.css

@@ -1,39 +1,39 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .person {
-	display: flex;
-	align-items: center;
-	gap: var(--g-spacing-sm);
+  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;
+  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);
+  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);
+  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);
+  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

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

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

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