@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/card/card.stories.js

@@ -1,34 +1,35 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-card");
-import "./card.js";
-import "../button-group/button-group.js";
-import "../button/button.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-card');
+
+import './card.js';
+import '../button-group/button-group.js';
+import '../button/button.js';
 
 const meta = {
-	title: "Components/Card",
-	component: "grantcodes-card",
-	args: {
-		...args,
-		content: "Here is the card content",
-	},
-	argTypes,
-	render: (args) =>
-		template(
-			args,
-			html`<h3 slot="header">Card Header</h3>
+  title: 'Components/Card',
+  component: 'grantcodes-card',
+  args: {
+    ...args,
+    content: 'Here is the card content',
+  },
+  argTypes,
+  render: (args) =>
+    template(
+      args,
+      html`<h3 slot="header">Card Header</h3>
         <p>${args.content}</p>
         <grantcodes-button-group slot="footer">
           <grantcodes-button>Action 1</grantcodes-button>
           <grantcodes-button>Action 2</grantcodes-button>
         </grantcodes-button-group>`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -36,8 +37,8 @@ export default meta;
 export const Card = {};
 
 export const CardInLink = {
-	render: () =>
-		html`<a
+  render: () =>
+    html`<a
       href="#"
       style="text-decoration: none; color: inherit; display: block;"
     >

package/src/components/card/card.test.js

@@ -1,57 +1,57 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./card.js";
-
-describe("Card Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-card");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have default slot", async () => {
-		element = await fixture("grantcodes-card");
-		const slot = element.shadowRoot.querySelector("slot:not([name])");
-		assert.ok(slot, "Default slot should exist");
-	});
-
-	it("should have header slot", async () => {
-		element = await fixture("grantcodes-card");
-		const headerSlot = element.shadowRoot.querySelector('slot[name="header"]');
-		assert.ok(headerSlot, "Header slot should exist");
-	});
-
-	it("should have footer slot", async () => {
-		element = await fixture("grantcodes-card");
-		const footerSlot = element.shadowRoot.querySelector('slot[name="footer"]');
-		assert.ok(footerSlot, "Footer slot should exist");
-	});
-
-	it("should render card wrapper", async () => {
-		element = await fixture("grantcodes-card");
-		const card = element.shadowRoot.querySelector(".card");
-		assert.ok(card, "Card wrapper should exist");
-	});
-
-	it("should support slotted content", async () => {
-		element = await fixture("grantcodes-card");
-		const content = document.createElement("p");
-		content.textContent = "Card content";
-		element.appendChild(content);
-
-		await element.updateComplete;
-
-		assert.strictEqual(
-			element.querySelector("p").textContent,
-			"Card content",
-			"Slotted content should be present",
-		);
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './card.js';
+
+describe('Card Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-card');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have default slot', async () => {
+    element = await fixture('grantcodes-card');
+    const slot = element.shadowRoot.querySelector('slot:not([name])');
+    assert.ok(slot, 'Default slot should exist');
+  });
+
+  it('should have header slot', async () => {
+    element = await fixture('grantcodes-card');
+    const headerSlot = element.shadowRoot.querySelector('slot[name="header"]');
+    assert.ok(headerSlot, 'Header slot should exist');
+  });
+
+  it('should have footer slot', async () => {
+    element = await fixture('grantcodes-card');
+    const footerSlot = element.shadowRoot.querySelector('slot[name="footer"]');
+    assert.ok(footerSlot, 'Footer slot should exist');
+  });
+
+  it('should render card wrapper', async () => {
+    element = await fixture('grantcodes-card');
+    const card = element.shadowRoot.querySelector('.card');
+    assert.ok(card, 'Card wrapper should exist');
+  });
+
+  it('should support slotted content', async () => {
+    element = await fixture('grantcodes-card');
+    const content = document.createElement('p');
+    content.textContent = 'Card content';
+    element.appendChild(content);
+
+    await element.updateComplete;
+
+    assert.strictEqual(
+      element.querySelector('p').textContent,
+      'Card content',
+      'Slotted content should be present',
+    );
+  });
 });

package/src/components/card/index.js

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

package/src/components/code-preview/code-preview.component.js

@@ -1,53 +1,52 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import codePreviewStyles from "./code-preview.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import codePreviewStyles from './code-preview.css' with { type: 'css' };
 
 export class GrantCodesCodePreview extends LitElement {
-	static styles = [codePreviewStyles];
-
-	static properties = {
-		language: { type: String },
-		theme: { type: String },
-	};
-
-	constructor() {
-		super();
-
-		this.language = "html";
-		this.theme = "aurora-x";
-		this.codePreview = null;
-	}
-
-	async doHighlight() {
-		const rawCode = this.textContent ?? "";
-		const { codeToHtml } = await import("shiki/bundle/web");
-		const highlightedCode = await codeToHtml(rawCode.trim(), {
-			lang: this.language,
-			theme: this.theme,
-		});
-
-		this.codePreview.innerHTML = highlightedCode;
-	}
-
-	async firstUpdated() {
-		this.codePreview = this.renderRoot.querySelector(".code-preview");
-		// Only highlight if we have content and we're in a browser environment,
-		// and not in a unit test environment
-		const isTestEnv =
-			typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
-		if (this.textContent && typeof window !== "undefined" && !isTestEnv) {
-			try {
-				await this.doHighlight();
-			} catch (error) {
-				// Silently fail in test environments
-				console.warn("Code highlighting failed:", error);
-			}
-		}
-	}
-
-	render() {
-		return html`<div class="code-preview">
+  static styles = [codePreviewStyles];
+
+  static properties = {
+    language: { type: String },
+    theme: { type: String },
+  };
+
+  constructor() {
+    super();
+
+    this.language = 'html';
+    this.theme = 'aurora-x';
+    this.codePreview = null;
+  }
+
+  async doHighlight() {
+    const rawCode = this.textContent ?? '';
+    const { codeToHtml } = await import('shiki/bundle/web');
+    const highlightedCode = await codeToHtml(rawCode.trim(), {
+      lang: this.language,
+      theme: this.theme,
+    });
+
+    this.codePreview.innerHTML = highlightedCode;
+  }
+
+  async firstUpdated() {
+    this.codePreview = this.renderRoot.querySelector('.code-preview');
+    // Only highlight if we have content and we're in a browser environment,
+    // and not in a unit test environment
+    const isTestEnv = typeof process !== 'undefined' && process?.env?.NODE_ENV === 'test';
+    if (this.textContent && typeof window !== 'undefined' && !isTestEnv) {
+      try {
+        await this.doHighlight();
+      } catch (error) {
+        // Silently fail in test environments
+        console.warn('Code highlighting failed:', error);
+      }
+    }
+  }
+
+  render() {
+    return html`<div class="code-preview">
 			<pre><slot></slot></pre>
 		</div> `;
-	}
+  }
 }

package/src/components/code-preview/code-preview.css

@@ -1,18 +1,18 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .code-preview > pre {
-	display: block;
-	font-family: var(--g-typography-font-family-code);
-	line-height: 1.2;
-	width: 100%;
-	overflow: auto;
-	border-radius: var(--g-border-radius-md);
-	box-shadow: var(--g-box-shadow-sm);
-	font-size: var(--g-typography-body-sm-font-size);
-	font-weight: var(--g-typography-body-lg-font-weight);
-	padding: var(--g-spacing-md);
+  display: block;
+  font-family: var(--g-typography-font-family-code);
+  line-height: 1.2;
+  width: 100%;
+  overflow: auto;
+  border-radius: var(--g-border-radius-md);
+  box-shadow: var(--g-box-shadow-sm);
+  font-size: var(--g-typography-body-sm-font-size);
+  font-weight: var(--g-typography-body-lg-font-weight);
+  padding: var(--g-spacing-md);
 }

package/src/components/code-preview/code-preview.js

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

package/src/components/code-preview/code-preview.react.js

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

package/src/components/code-preview/code-preview.stories.js

@@ -1,9 +1,9 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } = getStorybookHelpers(
-	"grantcodes-code-preview",
-);
-import "./code-preview.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-code-preview');
+
+import './code-preview.js';
 
 const jsCode = `
 import { thing } from "module";
@@ -31,21 +31,21 @@ body {
 `;
 
 const meta = {
-	title: "Components/CodePreview",
-	component: "grantcodes-code-preview",
-	args: {
-		...args,
-		language: "javascript",
-		theme: "aurora-x",
-		code: jsCode,
-	},
-	argTypes,
-	render: (args) => template(args, html`${args.code}`),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/CodePreview',
+  component: 'grantcodes-code-preview',
+  args: {
+    ...args,
+    language: 'javascript',
+    theme: 'aurora-x',
+    code: jsCode,
+  },
+  argTypes,
+  render: (args) => template(args, html`${args.code}`),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -53,15 +53,15 @@ export default meta;
 export const CodePreview = {};
 
 export const HTMLCodePreview = {
-	args: {
-		language: "html",
-		code: htmlCode,
-	},
+  args: {
+    language: 'html',
+    code: htmlCode,
+  },
 };
 
 export const CSSCodePreview = {
-	args: {
-		language: "css",
-		code: cssCode,
-	},
+  args: {
+    language: 'css',
+    code: cssCode,
+  },
 };