@grantcodes/ui 2.0.0 → 2.1.0

package/src/components/sidebar/sidebar.styles.js

@@ -1,192 +1,187 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const sidebarStyles = css`
-	*,
+  ${focusRingStyles}
+
+  *,
 	*::before,
 	*::after {
-		box-sizing: border-box;
-	}
-
-	:host {
-		display: contents;
-	}
-
-	.sidebar {
-		position: relative;
-		inline-size: var(--sidebar-width, 280px);
-		block-size: 100%;
-		background-color: var(--g-theme-color-background-default);
-		border-inline-end: 1px solid var(--g-theme-color-border-default);
-		overflow-y: auto;
-		transition: inline-size 0.3s ease;
-		flex-shrink: 0;
-	}
-
-	.sidebar--right {
-		border-inline-end: none;
-		border-inline-start: 1px solid var(--g-theme-color-border-default);
-	}
-
-	.sidebar--collapsed {
-		inline-size: 60px;
-	}
-
-	.sidebar--collapsed .sidebar__content {
-		padding-inline: 0.5rem;
-	}
-
-	.sidebar--collapsed .sidebar__content > *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
-		display: none;
-	}
-
-	.sidebar--collapsed .sidebar__toggle {
-		inset-inline-end: 50%;
-		transform: translateX(50%);
-	}
-
-	/* Mobile Toggle Button */
-	.sidebar__mobile-toggle {
-		all: unset;
-		display: none;
-		position: fixed;
-		inset-block-start: 1rem;
-		inset-inline-start: 1rem;
-		z-index: 1001;
-		inline-size: 2.5rem;
-		block-size: 2.5rem;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--g-theme-color-background-default);
-		border: 1px solid var(--g-theme-color-border-default);
-		border-radius: var(--g-theme-border-radius-md);
-		cursor: pointer;
-		font-size: 1.5rem;
-		transition: all 0.2s ease;
-	}
-
-	.sidebar__mobile-toggle:hover {
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.sidebar__mobile-toggle:focus-visible {
-		outline: 2px solid var(--component-focus-ring-color);
-		outline-offset: 2px;
-	}
-
-	/* Show mobile toggle on small screens */
-	@media (max-width: 768px) {
-		.sidebar__mobile-toggle {
-			display: flex;
-		}
-
-		.sidebar {
-			position: fixed;
-			inset-block-start: 0;
-			inset-block-end: 0;
-			inset-inline-start: -100%;
-			z-index: 1000;
-			transition: inset-inline-start 0.3s ease;
-		}
-
-		.sidebar--right {
-			inset-inline-start: auto;
-			inset-inline-end: -100%;
-			transition: inset-inline-end 0.3s ease;
-		}
-
-		.sidebar--drawer-open {
-			inset-inline-start: 0;
-		}
-
-		.sidebar--right.sidebar--drawer-open {
-			inset-inline-end: 0;
-			inset-inline-start: auto;
-		}
-	}
-
-	/* Overlay */
-	.sidebar__overlay {
-		display: none;
-		position: fixed;
-		inset: 0;
-		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 999;
-		animation: overlay-fade-in 0.2s ease-out;
-	}
-
-	@media (max-width: 768px) {
-		.sidebar__overlay {
-			display: block;
-		}
-	}
-
-	@keyframes overlay-fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	/* Collapse Toggle */
-	.sidebar__toggle {
-		all: unset;
-		position: absolute;
-		inset-block-start: 1rem;
-		inset-inline-end: 0.5rem;
-		inline-size: 1.5rem;
-		block-size: 1.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--g-theme-color-background-default);
-		border: 1px solid var(--g-theme-color-border-default);
-		border-radius: var(--g-theme-border-radius-md);
-		cursor: pointer;
-		font-size: 0.875rem;
-		transition: all 0.2s ease;
-		z-index: 10;
-	}
-
-	.sidebar__toggle:hover {
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.sidebar__toggle:focus-visible {
-		outline: 2px solid var(--component-focus-ring-color);
-		outline-offset: 2px;
-	}
-
-	.sidebar--right .sidebar__toggle {
-		inset-inline-end: auto;
-		inset-inline-start: 0.5rem;
-	}
-
-	.sidebar--right.sidebar--collapsed .sidebar__toggle {
-		inset-inline-start: 50%;
-		inset-inline-end: auto;
-		transform: translateX(-50%);
-	}
-
-	@media (max-width: 768px) {
-		.sidebar__toggle {
-			display: none;
-		}
-	}
-
-	/* Content */
-	.sidebar__content {
-		padding-block: 1rem;
-		padding-inline: 1rem;
-	}
-
-	/* View transitions */
-	@media (prefers-reduced-motion: no-preference) {
-		@supports (view-transition-name: auto) {
-			.sidebar {
-				view-transition-name: sidebar;
-			}
-		}
-	}
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: contents;
+  }
+
+  .sidebar {
+    position: relative;
+    inline-size: var(--sidebar-width, 280px);
+    block-size: 100%;
+    background-color: var(--g-theme-color-background-default);
+    border-inline-end: 1px solid var(--g-theme-color-border-default);
+    overflow-y: auto;
+    transition: inline-size 0.3s ease;
+    flex-shrink: 0;
+  }
+
+  .sidebar--right {
+    border-inline-end: none;
+    border-inline-start: 1px solid var(--g-theme-color-border-default);
+  }
+
+  .sidebar--collapsed {
+    inline-size: 60px;
+  }
+
+  .sidebar--collapsed .sidebar__content {
+    padding-inline: var(--g-theme-spacing-sm);
+  }
+
+  .sidebar--collapsed
+    .sidebar__content
+    > *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
+    display: none;
+  }
+
+  .sidebar--collapsed .sidebar__toggle {
+    inset-inline-end: 50%;
+    transform: translateX(50%);
+  }
+
+  /* Mobile Toggle Button */
+  .sidebar__mobile-toggle {
+    all: unset;
+    display: none;
+    position: fixed;
+    inset-block-start: var(--g-theme-spacing-md);
+    inset-inline-start: var(--g-theme-spacing-md);
+    z-index: 1001;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--g-theme-color-background-default);
+    border: 1px solid var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md);
+    cursor: pointer;
+    font-size: var(--g-theme-typography-title-default-font-size);
+    transition: all 0.2s ease;
+  }
+
+  .sidebar__mobile-toggle:hover {
+    background-color: var(--g-theme-color-background-subtle-hover);
+  }
+
+  /* Show mobile toggle on small screens */
+  @media (max-width: 768px) {
+    .sidebar__mobile-toggle {
+      display: flex;
+    }
+
+    .sidebar {
+      position: fixed;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: -100%;
+      z-index: 1000;
+      transition: inset-inline-start 0.3s ease;
+    }
+
+    .sidebar--right {
+      inset-inline-start: auto;
+      inset-inline-end: -100%;
+      transition: inset-inline-end 0.3s ease;
+    }
+
+    .sidebar--drawer-open {
+      inset-inline-start: 0;
+    }
+
+    .sidebar--right.sidebar--drawer-open {
+      inset-inline-end: 0;
+      inset-inline-start: auto;
+    }
+  }
+
+  /* Overlay */
+  .sidebar__overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    animation: overlay-fade-in 0.2s ease-out;
+  }
+
+  @media (max-width: 768px) {
+    .sidebar__overlay {
+      display: block;
+    }
+  }
+
+  @keyframes overlay-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Collapse Toggle */
+  .sidebar__toggle {
+    all: unset;
+    position: absolute;
+    inset-block-start: var(--g-theme-spacing-md);
+    inset-inline-end: var(--g-theme-spacing-sm);
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--g-theme-color-background-default);
+    border: 1px solid var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md);
+    cursor: pointer;
+    font-size: var(--g-typography-font-size-14);
+    transition: all 0.2s ease;
+    z-index: 10;
+  }
+
+  .sidebar__toggle:hover {
+    background-color: var(--g-theme-color-background-subtle-hover);
+  }
+
+  .sidebar--right .sidebar__toggle {
+    inset-inline-end: auto;
+    inset-inline-start: var(--g-theme-spacing-sm);
+  }
+
+  .sidebar--right.sidebar--collapsed .sidebar__toggle {
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    transform: translateX(-50%);
+  }
+
+  @media (max-width: 768px) {
+    .sidebar__toggle {
+      display: none;
+    }
+  }
+
+  /* Content */
+  .sidebar__content {
+    padding-block: var(--g-theme-spacing-md);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  /* View transitions */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (view-transition-name: auto) {
+      .sidebar {
+        view-transition-name: sidebar;
+      }
+    }
+  }
 `;

package/src/components/sidebar/sidebar.test.js

@@ -18,17 +18,29 @@ describe("Sidebar Component", () => {
 
 	it("should have left position by default", async () => {
 		element = await fixture("grantcodes-sidebar");
-		assert.strictEqual(element.position, "left", "Should have left position by default");
+		assert.strictEqual(
+			element.position,
+			"left",
+			"Should have left position by default",
+		);
 	});
 
 	it("should not be collapsed by default", async () => {
 		element = await fixture("grantcodes-sidebar");
-		assert.strictEqual(element.collapsed, false, "Should not be collapsed by default");
+		assert.strictEqual(
+			element.collapsed,
+			false,
+			"Should not be collapsed by default",
+		);
 	});
 
 	it("should be collapsible by default", async () => {
 		element = await fixture("grantcodes-sidebar");
-		assert.strictEqual(element.collapsible, true, "Should be collapsible by default");
+		assert.strictEqual(
+			element.collapsible,
+			true,
+			"Should be collapsible by default",
+		);
 	});
 
 	it("should have default width", async () => {
@@ -99,7 +111,11 @@ describe("Sidebar Component", () => {
 		click(toggle);
 		await element.updateComplete;
 
-		assert.strictEqual(element.collapsed, true, "Should be collapsed after click");
+		assert.strictEqual(
+			element.collapsed,
+			true,
+			"Should be collapsed after click",
+		);
 	});
 
 	it("should emit toggle event when collapsed state changes", async () => {
@@ -117,7 +133,11 @@ describe("Sidebar Component", () => {
 
 		await element.updateComplete;
 
-		assert.strictEqual(toggledState, true, "Toggle event should fire with collapsed state");
+		assert.strictEqual(
+			toggledState,
+			true,
+			"Toggle event should fire with collapsed state",
+		);
 	});
 
 	it("should apply custom width", async () => {
@@ -127,12 +147,17 @@ describe("Sidebar Component", () => {
 
 		const aside = element.shadowRoot.querySelector("aside");
 		const style = aside.getAttribute("style");
-		assert.ok(style.includes("--sidebar-width: 350px"), "Should set custom width");
+		assert.ok(
+			style.includes("--sidebar-width: 350px"),
+			"Should set custom width",
+		);
 	});
 
 	it("should have mobile toggle button", async () => {
 		element = await fixture("grantcodes-sidebar");
-		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+		const mobileToggle = element.shadowRoot.querySelector(
+			".sidebar__mobile-toggle",
+		);
 		assert.ok(mobileToggle, "Mobile toggle button should exist");
 	});
 
@@ -150,14 +175,24 @@ describe("Sidebar Component", () => {
 
 	it("should toggle mobile drawer when mobile toggle is clicked", async () => {
 		element = await fixture("grantcodes-sidebar");
-		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+		const mobileToggle = element.shadowRoot.querySelector(
+			".sidebar__mobile-toggle",
+		);
 
-		assert.strictEqual(element._drawerOpen, false, "Drawer should start closed");
+		assert.strictEqual(
+			element._drawerOpen,
+			false,
+			"Drawer should start closed",
+		);
 
 		click(mobileToggle);
 		await element.updateComplete;
 
-		assert.strictEqual(element._drawerOpen, true, "Drawer should be open after click");
+		assert.strictEqual(
+			element._drawerOpen,
+			true,
+			"Drawer should be open after click",
+		);
 	});
 
 	it("should emit drawer-toggle event", async () => {
@@ -168,7 +203,9 @@ describe("Sidebar Component", () => {
 			drawerState = e.detail.open;
 		});
 
-		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+		const mobileToggle = element.shadowRoot.querySelector(
+			".sidebar__mobile-toggle",
+		);
 		click(mobileToggle);
 
 		await element.updateComplete;
@@ -192,5 +229,3 @@ describe("Sidebar Component", () => {
 		assert.ok(!overlay, "Overlay should not exist when drawer is closed");
 	});
 });
-
-

package/src/components/stats/index.js

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

package/src/components/stats/stats.component.js

@@ -0,0 +1,73 @@
+import { LitElement, html } from "lit";
+import { statsStyles } from "./stats.styles.js";
+
+export class GrantCodesStats extends LitElement {
+	static styles = [statsStyles];
+
+	static properties = {
+		/**
+		 * Optional section heading.
+		 * @type {string}
+		 */
+		title: { type: String },
+		/**
+		 * Stat items as a JSON string array: `[{"label":"...","value":"...","context":"..."}]`.
+		 * @type {string}
+		 */
+		items: { type: String },
+		/**
+		 * Number of columns in the grid (1–6).
+		 * @type {number}
+		 */
+		columns: { type: Number },
+	};
+
+	constructor() {
+		super();
+		this.title = "";
+		this.items = "[]";
+		this.columns = 4;
+	}
+
+	get _items() {
+		try {
+			return JSON.parse(this.items);
+		} catch {
+			return [];
+		}
+	}
+
+	render() {
+		const items = this._items;
+		return html`
+			<section class="stats">
+				<div class="stats__container">
+					${
+						this.title
+							? html`<h2 class="stats__title">${this.title}</h2>`
+							: null
+					}
+					<ul
+						class="stats__grid"
+						style="--columns: ${this.columns}"
+						role="list"
+					>
+						${items.map(
+							(item) => html`
+								<li class="stats__item">
+									<span class="stats__value">${item.value}</span>
+									<span class="stats__label">${item.label}</span>
+									${
+										item.context
+											? html`<span class="stats__context">${item.context}</span>`
+											: null
+									}
+								</li>
+							`,
+						)}
+					</ul>
+				</div>
+			</section>
+		`;
+	}
+}

package/src/components/stats/stats.js

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

package/src/components/stats/stats.stories.js

@@ -0,0 +1,64 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./stats.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-stats");
+
+const meta = {
+	title: "Blocks/Stats",
+	component: "grantcodes-stats",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+/**
+ * Default stats block with 4 metrics.
+ */
+export const Default = {
+	args: {
+		title: "By the numbers",
+		items: JSON.stringify([
+			{ value: "10k+", label: "Developers", context: "using our components" },
+			{ value: "99.9%", label: "Uptime", context: "in the last 12 months" },
+			{ value: "42ms", label: "Avg load time" },
+			{ value: "24/7", label: "Support" },
+		]),
+		columns: 4,
+	},
+};
+
+/**
+ * Three stats — useful when you have fewer key metrics.
+ */
+export const ThreeStats = {
+	args: {
+		items: JSON.stringify([
+			{ value: "500+", label: "Components" },
+			{ value: "15", label: "Themes" },
+			{ value: "0", label: "Dependencies" },
+		]),
+		columns: 3,
+	},
+};
+
+/**
+ * Stats without a heading — embed directly into a page section.
+ */
+export const NoHeading = {
+	args: {
+		items: JSON.stringify([
+			{ value: "$0", label: "Cost to start" },
+			{ value: "MIT", label: "License" },
+			{ value: "100%", label: "Open source" },
+			{ value: "∞", label: "Customisable" },
+		]),
+		columns: 4,
+	},
+};