WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

refactor(ui): refine catalog mega menu navigation
Quality / quality (windows-latest) (push) Waiting to run
Details
Quality / quality (ubuntu-latest) (push) Failing after 10m52s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 22:40:58 +05:30
parent b98d417185
commit 904bca21b2
5 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+1 -1
View File
@@ -688,7 +688,7 @@
}, },
"packages/ui": { "packages/ui": {
"name": "@wrnexus/ui", "name": "@wrnexus/ui",
"version": "0.8.34", "version": "0.8.35",
"dependencies": { "dependencies": {
"@wrnexus/core": "workspace:*", "@wrnexus/core": "workspace:*",
}, },
docs/ui-visual-contract-0.8.json
+1 -1
View File
@@ -55,7 +55,7 @@
"packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890", "packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890",
"packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad", "packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad",
"packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b", "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b",
"packages/ui/components/MegaMenu.wrn": "76b80afc78294c82b1aadc19cc4904de0233e0012c48cf5bce17ca638d8effa2", "packages/ui/components/MegaMenu.wrn": "61869ce38dffdd0bb6ccef8da95143a528eccfcfa29718ca6afc2bfccb2fe642",
"packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5", "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5",
"packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5", "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5",
"packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2", "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
packages/ui/components/MegaMenu.wrn
+12 -5
View File
@@ -223,7 +223,7 @@ component MegaMenu {
<aside class="wrn-mega__rail"> <aside class="wrn-mega__rail">
{#each railList() as item, index} {#each railList() as item, index}
{#if variant === "catalog"} {#if variant === "catalog"}
<button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index)' @mouseenter='chooseCategory(item, index)'> <button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index)'>
{#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if} {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span> <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
</button> </button>
@@ -240,9 +240,11 @@ component MegaMenu {
<div class="wrn-mega__columns"> <div class="wrn-mega__columns">
{#each visibleColumns() as column} {#each visibleColumns() as column}
<section class="wrn-mega__column"> <section class="wrn-mega__column">
<header class="wrn-mega__column-header">
{#if column.eyebrow}<p class="wrn-mega__eyebrow">{column.eyebrow}</p>{/if} {#if column.eyebrow}<p class="wrn-mega__eyebrow">{column.eyebrow}</p>{/if}
<h3 class="wrn-mega__heading" data-show="column.heading">{column.heading}</h3> <h3 class="wrn-mega__heading" data-show="column.heading">{column.heading}</h3>
{#if column.description}<p class="wrn-mega__column-description">{column.description}</p>{/if} {#if column.description}<p class="wrn-mega__column-description">{column.description}</p>{/if}
</header>
{#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" />{/if} {#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" />{/if}
<ul class="wrn-mega__list"> <ul class="wrn-mega__list">
{#each itemsOf(column) as item} {#each itemsOf(column) as item}
@@ -468,13 +470,18 @@ component MegaMenu {
.wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; } .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); } .wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); }
.wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; } .wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail { border-radius: calc(var(--wrn-radius-lg) - 0.25rem); } .wrn-mega[data-variant="catalog"] .wrn-mega__rail { min-width: 0; padding: 0.5rem; gap: 0.15rem; border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { padding: 0.48rem 0.55rem; align-items: center; gap: 0.55rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; line-height: 1.25; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; font-size: 0.9rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); } .wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; } .wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0 0 1rem; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; } .wrn-mega[data-variant="catalog"] .wrn-mega__column-header { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-md); background: var(--wrn-color-surface-soft); }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-description { margin: 0.3rem 0 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; } .wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; border: 1px solid transparent; } .wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; align-items: center; border: 1px solid var(--wrn-color-border); background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent); }
.wrn-mega[data-variant="catalog"] .wrn-mega__link:hover { border-color: var(--wrn-color-border); } .wrn-mega[data-variant="catalog"] .wrn-mega__link:hover { border-color: color-mix(in srgb, var(--mega-accent) 45%, var(--wrn-color-border)); background: color-mix(in srgb, var(--mega-accent) 7%, var(--wrn-color-surface)); transform: translateY(-1px); }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-action { margin-top: auto; padding-top: 1rem; } .wrn-mega[data-variant="catalog"] .wrn-mega__column-action { margin-top: auto; padding-top: 1rem; }
.wrn-mega[data-variant="dark"] .wrn-mega__panel { color: #f8fafc; border-color: #2b2b2b; background: #151515; } .wrn-mega[data-variant="dark"] .wrn-mega__panel { color: #f8fafc; border-color: #2b2b2b; background: #151515; }
.wrn-mega[data-variant="dark"] :is(.wrn-mega__heading, .wrn-mega__link, .wrn-mega__featured strong) { color: #f8fafc; } .wrn-mega[data-variant="dark"] :is(.wrn-mega__heading, .wrn-mega__link, .wrn-mega__featured strong) { color: #f8fafc; }
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@wrnexus/ui", "name": "@wrnexus/ui",
"version": "0.8.34", "version": "0.8.35",
"private": true, "private": true,
"type": "module", "type": "module",
"main": "src/index.ts", "main": "src/index.ts",
packages/ui/test/ui.test.ts
+2
View File
@@ -2970,6 +2970,8 @@ test("catalog mega menu renders only the active rail category", async () => {
expect(dom.querySelector(".wrn-mega__heading")?.textContent).toContain("Sales"); expect(dom.querySelector(".wrn-mega__heading")?.textContent).toContain("Sales");
expect(dom.querySelector('[aria-pressed="true"]')?.textContent).toContain("Sales"); expect(dom.querySelector('[aria-pressed="true"]')?.textContent).toContain("Sales");
expect(source).toContain("overflow-y: auto"); expect(source).toContain("overflow-y: auto");
expect(source).not.toContain("@mouseenter='chooseCategory(item, index)'");
expect(dom.querySelector(".wrn-mega__column-header")?.textContent).toContain("Sales");
}); });
test("mega menu supports rails, icons, badges, media, featured content and footer actions", async () => { test("mega menu supports rails, icons, badges, media, featured content and footer actions", async () => {