@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/components/button/button.styles.js

@@ -0,0 +1,97 @@
+import { css } from "lit";
+
+export const buttonStyles = css`
+/* Inlined component-base mixin */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+	--button-border-radius-start: var(--g-theme-border-radius-md);
+	--button-border-radius-end: var(--g-theme-border-radius-md);
+}
+
+.button {
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	background: var(--g-theme-button-primary-color-background-default);
+	color: var(--g-theme-button-primary-color-content-default);
+	border-width: var(--g-theme-border-width-md);
+	border-style: solid;
+	border-color: var(--g-theme-button-primary-color-border-default);
+	padding: 0.5em 1em;
+	border-start-start-radius: var(--button-border-radius-start);
+	border-start-end-radius: var(--button-border-radius-end);
+	border-end-start-radius: var(--button-border-radius-start);
+	border-end-end-radius: var(--button-border-radius-end);
+	font-size: 1rem;
+	font-weight: bold;
+	letter-spacing: 0.05em;
+	text-decoration: none;
+	outline: 1px solid transparent;
+	transition:
+		color 0.2s,
+		border-color 0.2s,
+		background-color 0.2s,
+		outline 0.2s;
+
+	/* Inlined focus-ring styles */
+	outline-color: transparent;
+	outline-offset: var(--g-theme-focus-ring-offset-default);
+	outline-style: solid;
+	outline-width: var(--g-theme-focus-ring-width-default);
+}
+
+.button:focus-visible {
+	outline-color: var(--g-theme-focus-ring-color-default);
+}
+
+@media (prefers-contrast: more) {
+	.button:focus-visible {
+		outline-color: var(--g-theme-focus-ring-color-contrast);
+		box-shadow: 0 0 0
+			calc(
+				(
+					var(--g-theme-focus-ring-width-default) +
+					var(--g-theme-focus-ring-offset-default)
+				) *
+				1.5
+			)
+			var(--g-theme-focus-ring-color-contrast-shadow);
+	}
+}
+
+.button:hover,
+.button:focus-visible {
+	color: var(--g-theme-button-primary-color-content-hover);
+	background: var(--g-theme-button-primary-color-background-hover);
+	border-color: var(--g-theme-button-primary-color-border-hover);
+	cursor: pointer;
+	text-decoration: none;
+}
+
+.button:active {
+	color: var(--g-theme-button-primary-color-content-active);
+	background: var(--g-theme-button-primary-color-background-active);
+	border-color: var(--g-theme-button-primary-color-border-active);
+}
+
+.button:active {
+	transform: translateY(1px);
+}
+
+.button[disabled] {
+	background: var(--g-theme-button-primary-color-background-disabled);
+	color: var(--g-theme-button-primary-color-content-disabled);
+	border-color: var(--g-theme-button-primary-color-border-disabled);
+	cursor: not-allowed;
+	filter: grayscale(70%);
+	opacity: 0.8;
+}
+
+`;

package/src/components/button/button.test.js

@@ -0,0 +1,98 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./button.js";
+
+describe("Button Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-button");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should render button element by default", async () => {
+		element = await fixture("grantcodes-button");
+		const button = element.shadowRoot.querySelector("button");
+		assert.ok(button, "Button element should exist");
+	});
+
+	it("should render link when href is provided", async () => {
+		element = await fixture("grantcodes-button", {
+			href: "https://example.com",
+		});
+		await element.updateComplete;
+
+		const link = element.shadowRoot.querySelector("a");
+		assert.ok(link, "Link element should exist");
+		const href = link.getAttribute("href");
+		assert.ok(href, "Link should have href attribute");
+		assert.ok(href.includes("example.com") || href === "https://example.com", "Link href should contain example.com");
+	});
+
+	it("should be disabled when disabled property is set", async () => {
+		element = await fixture("grantcodes-button", {
+			disabled: true,
+		});
+
+		const button = element.shadowRoot.querySelector("button");
+		assert.ok(button.disabled, "Button should be disabled");
+		assert.ok(button.hasAttribute("disabled"), "Button should have disabled attribute");
+	});
+
+	it("should emit click event when clicked", async () => {
+		element = await fixture("grantcodes-button");
+		const button = element.shadowRoot.querySelector("button");
+
+		let clicked = false;
+		element.addEventListener("click", () => {
+			clicked = true;
+		});
+
+		click(button);
+		assert.ok(clicked, "Click event should have fired");
+	});
+
+	it("should not emit click event when disabled", async () => {
+		element = await fixture("grantcodes-button", {
+			disabled: true,
+		});
+		const button = element.shadowRoot.querySelector("button");
+
+		let clicked = false;
+		element.addEventListener("click", () => {
+			clicked = true;
+		});
+
+		click(button);
+		assert.ok(!clicked, "Click event should not fire when disabled");
+	});
+
+	it("should support different button types", async () => {
+		const types = ["button", "submit", "reset"];
+
+		for (const type of types) {
+			const testElement = await fixture("grantcodes-button", { type });
+			const button = testElement.shadowRoot.querySelector("button");
+			assert.strictEqual(button.type, type, `Button type should be ${type}`);
+			cleanup(testElement);
+		}
+	});
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-button");
+		element.textContent = "Click me";
+
+		await element.updateComplete;
+
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist");
+	});
+});
+
+

package/src/components/button/index.js

@@ -0,0 +1 @@
+export * from "./button";

package/src/components/button-group/button-group.component.js

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { buttonGroupStyles } from "./button-group.styles.js";
+
+export class GrantCodesButtonGroup 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 = [buttonGroupStyles];
+
+	// Define reactive properties--updating a reactive property causes
+	// the component to update.
+	// @property() label = 'Button Label'
+
+	// The render() method is called any time reactive properties change.
+	// Return HTML in a string template literal tagged with the `html`
+	// tag function to describe the component's internal DOM.
+	// Expressions can set attribute values, property values, event handlers,
+	// and child nodes/text.
+	render() {
+		return html`
+      <div class="button-group">
+        <slot></slot>
+      </div>
+    `;
+	}
+}

package/src/components/button-group/button-group.js

@@ -0,0 +1,6 @@
+import { GrantCodesButtonGroup } from "./button-group.component.js";
+
+export * from "./button-group.component.js";
+export default GrantCodesButtonGroup;
+
+customElements.define("grantcodes-button-group", GrantCodesButtonGroup);

package/src/components/button-group/button-group.stories.js

@@ -0,0 +1,33 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } = getStorybookHelpers(
+	"grantcodes-button-group",
+);
+import { html } from "lit/static-html.js";
+import "./button-group";
+import "../button/button";
+
+const meta = {
+	title: "Components/ButtonGroup",
+	component: "grantcodes-button-group",
+	args: {
+		...args,
+	},
+	argTypes,
+	render: (args) =>
+		template(
+			args,
+			html`
+    <grantcodes-button>Button 1</grantcodes-button>
+    <grantcodes-button>Button 2</grantcodes-button>
+    <grantcodes-button>Button 3</grantcodes-button>`,
+		),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const ButtonGroup = {};

package/src/components/button-group/button-group.styles.js

@@ -0,0 +1,43 @@
+import { css } from "lit";
+
+export const buttonGroupStyles = css`
+  /* Inlined component-base mixin */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .button-group {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background: var(--g-theme-color-background-default);
+    border-radius: var(--g-theme-border-radius-md);
+    min-width: fit-content;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .button-group ::slotted(grantcodes-button) {
+    --button-border-radius-start: 0;
+    --button-border-radius-end: 0;
+  }
+
+  .button-group ::slotted(grantcodes-button:first-child) {
+    --button-border-radius-start: var(--g-theme-border-radius-md);
+  }
+
+  .button-group ::slotted(grantcodes-button:last-child) {
+    --button-border-radius-end: var(--g-theme-border-radius-md);
+  }
+
+  .button-group ::slotted(grantcodes-button:focus-visible) {
+    position: relative;
+    z-index: 1;
+  }
+`;

package/src/components/button-group/button-group.test.js

@@ -0,0 +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 "./button-group.js";
+
+describe("Button Group Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-button-group");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should render button group wrapper", async () => {
+		element = await fixture("grantcodes-button-group");
+		const group = element.shadowRoot.querySelector(".button-group");
+		assert.ok(group, "Button group wrapper should exist");
+	});
+
+	it("should have slot for buttons", async () => {
+		element = await fixture("grantcodes-button-group");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for buttons");
+	});
+
+	it("should support multiple slotted buttons", async () => {
+		element = await fixture("grantcodes-button-group");
+
+		const button1 = document.createElement("button");
+		button1.textContent = "Button 1";
+		const button2 = document.createElement("button");
+		button2.textContent = "Button 2";
+		const button3 = document.createElement("button");
+		button3.textContent = "Button 3";
+
+		element.appendChild(button1);
+		element.appendChild(button2);
+		element.appendChild(button3);
+
+		await element.updateComplete;
+
+		assert.strictEqual(element.children.length, 3, "Should have three buttons");
+	});
+
+	it("should group buttons together visually", async () => {
+		element = await fixture("grantcodes-button-group");
+		const group = element.shadowRoot.querySelector(".button-group");
+		assert.ok(group, "Button group should provide visual grouping");
+	});
+});
+
+

package/src/components/button-group/index.js

@@ -0,0 +1 @@
+export * from "./button-group";

package/src/components/card/card.component.js

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { cardStyles } from "./card.styles.js";
+
+export class GrantCodesCard extends LitElement {
+	static styles = [cardStyles];
+
+	render() {
+			return html`
+		      <div class="card">
+		        <div class="card__header"><slot name="header"></slot></div>
+		        <div class="card__content"><slot></slot></div>
+		        <div class="card__footer"><slot name="footer"></slot></div>
+		      </div>
+		    `;
+	}
+}

package/src/components/card/card.js

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

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

@@ -0,0 +1,36 @@
+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";
+
+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>
+				<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,
+		},
+	},
+};
+
+export default meta;
+
+export const Card = {};

package/src/components/card/card.styles.js

@@ -0,0 +1,128 @@
+import { css } from "lit";
+
+export const cardStyles = css`
+  /* Inlined component-base mixin */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    /* Enable container queries for responsive card layouts */
+    container-type: inline-size;
+    container-name: card;
+  }
+
+  .card {
+    display: flex;
+    inline-size: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: hidden;
+    background: var(--g-theme-color-background-default);
+    border-style: solid;
+    border-width: var(--g-theme-border-width-sm);
+    border-color: var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md);
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.12),
+      0 1px 2px rgba(0, 0, 0, 0.24);
+    transition:
+      box-shadow 0.2s ease,
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      background-color 0.2s ease;
+    box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.08),
+      0 6px 12px rgba(0, 0, 0, 0.04);
+  }
+
+  /* Image support - images in header or content will be styled appropriately */
+  .card__header img,
+  .card__content img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: inherit;
+  }
+
+  .card__header {
+    padding-inline: 1rem;
+    padding-block: calc(1rem * 0.75);
+    border-block-end: 1px solid var(--g-theme-color-border-default);
+  }
+
+  .card__header ::slotted(*) {
+    margin: 0;
+    font-weight: 600;
+    font-size: var(--g-typography-font-size-24);
+  }
+
+  .card__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding-block: 1rem;
+    padding-inline: 1rem;
+  }
+
+  .card__content > * {
+    margin: 0;
+  }
+
+  .card__footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: calc(1rem * 0.5);
+    border-block-start: 1px solid var(--g-theme-color-border-default);
+    background: var(--g-theme-color-background-default);
+  }
+
+  .card__footer ::slotted(grantcodes-button-group) {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .card__meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 0;
+    padding-inline: 1rem;
+    padding-block: 1em;
+    font-size: var(--g-typography-font-size-14);
+    /* Use color-mix() for modern color manipulation */
+    background-color: color-mix(
+      in srgb,
+      var(--g-theme-color-background-default) 90%,
+      var(--g-color-brand-purple-500) 10%
+    );
+    color: var(--g-theme-color-content-default);
+  }
+
+  .card__meta__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.3em;
+  }
+
+  .card__meta__item dt,
+  .card__meta__item dd {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .card__meta__item dt::after {
+    content: ":";
+  }
+`;

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

@@ -0,0 +1,59 @@
+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",
+		);
+	});
+});
+
+

package/src/components/card/index.js

@@ -0,0 +1 @@
+export * from "./card";

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

@@ -0,0 +1,53 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { codePreviewStyles } from "./code-preview.styles.js";
+
+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">
+			<pre><slot></slot></pre>
+		</div> `;
+	}
+}

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

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