feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -187,7 +187,7 @@ component MegaMenu {
|
||||
@keydown='handleKeydown(event)'
|
||||
@mouseenter='cancelScheduledHide()'
|
||||
@mouseleave='scheduleHide()'
|
||||
>
|
||||
data-wrn-owner="MegaMenu" data-wrn-part="root" data-wrn-component="MegaMenu" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-variant='{variant}'>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-mega__trigger"
|
||||
@@ -196,10 +196,10 @@ component MegaMenu {
|
||||
aria-label='{label || "Menu"}'
|
||||
@click='activatePanel(event)'
|
||||
@mouseenter='hoverPanel(event)'
|
||||
>
|
||||
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
|
||||
<span class="wrn-mega__trigger-label" data-label='{label || "Menu"}' aria-hidden="true"></span>
|
||||
<span class="wrn-mega__arrow" aria-hidden="true">›</span>
|
||||
data-wrn-owner="MegaMenu" data-wrn-part="trigger" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="triggerIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span class="wrn-mega__trigger-label" data-label='{label || "Menu"}' aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="triggerLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span class="wrn-mega__arrow" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">›</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
@@ -209,19 +209,19 @@ component MegaMenu {
|
||||
style='{visible ? "" : "display:none"}'
|
||||
data-wrn-roving="both"
|
||||
@mouseenter='cancelScheduledHide()'
|
||||
>
|
||||
<div class="wrn-mega__layout">
|
||||
data-wrn-owner="MegaMenu" data-wrn-part="panel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-mega__layout" data-wrn-owner="MegaMenu" data-wrn-part="layout" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if railList().length > 0}
|
||||
<aside class="wrn-mega__rail">
|
||||
<aside class="wrn-mega__rail" data-wrn-owner="MegaMenu" data-wrn-part="rail" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#each railList() as item, index}
|
||||
{#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, event)'>
|
||||
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
|
||||
<button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index, event)' data-wrn-owner="MegaMenu" data-wrn-part="railLink" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="railIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span class='{item.icon}'></span></span>{/if}
|
||||
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
|
||||
</button>
|
||||
{:else}
|
||||
<a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)'>
|
||||
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
|
||||
<a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)' data-wrn-owner="MegaMenu" data-wrn-part="railLink" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="railIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span class='{item.icon}'></span></span>{/if}
|
||||
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
|
||||
</a>
|
||||
{/if}
|
||||
@@ -229,53 +229,53 @@ component MegaMenu {
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-mega__columns">
|
||||
<div class="wrn-mega__columns" data-wrn-owner="MegaMenu" data-wrn-part="columns" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#each visibleColumns() as column}
|
||||
<section class="wrn-mega__column">
|
||||
<header class="wrn-mega__column-header">
|
||||
{#if column.eyebrow}<p class="wrn-mega__eyebrow">{column.eyebrow}</p>{/if}
|
||||
<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}
|
||||
<section class="wrn-mega__column" data-wrn-owner="MegaMenu" data-wrn-part="column" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
<header class="wrn-mega__column-header" data-wrn-owner="MegaMenu" data-wrn-part="columnHeader" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if column.eyebrow}<p class="wrn-mega__eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="eyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.eyebrow}</p>{/if}
|
||||
<h3 class="wrn-mega__heading" data-show="column.heading" data-wrn-owner="MegaMenu" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.heading}</h3>
|
||||
{#if column.description}<p class="wrn-mega__column-description" data-wrn-owner="MegaMenu" data-wrn-part="columnDescription" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.description}</p>{/if}
|
||||
</header>
|
||||
{#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" />{/if}
|
||||
<ul class="wrn-mega__list">
|
||||
{#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" data-wrn-owner="MegaMenu" data-wrn-part="columnImage" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"/>{/if}
|
||||
<ul class="wrn-mega__list" data-wrn-owner="MegaMenu" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#each itemsOf(column) as item}
|
||||
<li>
|
||||
<a class="wrn-mega__link" href='{item.href || "#"}' data-wrn-roving-item="true" aria-disabled='{item.disabled ? "true" : "false"}' @click='choose(item)'>
|
||||
{#if item.image}<img class="wrn-mega__link-image" src='{item.image}' alt="" loading="lazy" />{/if}
|
||||
<a class="wrn-mega__link" href='{item.href || "#"}' data-wrn-roving-item="true" aria-disabled='{item.disabled ? "true" : "false"}' @click='choose(item)' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.image}<img class="wrn-mega__link-image" src='{item.image}' alt="" loading="lazy" data-wrn-owner="MegaMenu" data-wrn-part="linkImage" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"/>{/if}
|
||||
{#if item.icon}
|
||||
<span class='wrn-mega__link-icon {item.icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-mega__link-icon {item.icon}' aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="linkIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if variant === "catalog"}
|
||||
<span class="wrn-mega__link-icon wrn-mega__link-icon--fallback" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
|
||||
<span class="wrn-mega__link-icon wrn-mega__link-icon--fallback" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="linkIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-wrn-owner="MegaMenu" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
|
||||
</span>
|
||||
{/if}
|
||||
<span class="wrn-mega__link-body">
|
||||
{#if item.eyebrow}<span class="wrn-mega__link-eyebrow">{item.eyebrow}</span>{/if}
|
||||
<span class="wrn-mega__link-label">{item.label}{#if item.badge}<span class="wrn-mega__badge">{item.badge}</span>{/if}</span>
|
||||
{#if item.description}<span class="wrn-mega__link-description">{item.description}</span>{/if}
|
||||
<span class="wrn-mega__link-body" data-wrn-owner="MegaMenu" data-wrn-part="linkBody" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.eyebrow}<span class="wrn-mega__link-eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="linkEyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.eyebrow}</span>{/if}
|
||||
<span class="wrn-mega__link-label" data-wrn-owner="MegaMenu" data-wrn-part="linkLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.label}{#if item.badge}<span class="wrn-mega__badge" data-wrn-owner="MegaMenu" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.badge}</span>{/if}</span>
|
||||
{#if item.description}<span class="wrn-mega__link-description" data-wrn-owner="MegaMenu" data-wrn-part="linkDescription" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.description}</span>{/if}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if column.actionLabel}<a class="wrn-mega__column-action" href='{column.actionHref || "#"}'>{column.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
|
||||
{#if column.actionLabel}<a class="wrn-mega__column-action" href='{column.actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="columnAction" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if featured.title || featured.image}
|
||||
<aside class="wrn-mega__featured">
|
||||
{#if featured.eyebrow}<p class="wrn-mega__eyebrow">{featured.eyebrow}</p>{/if}
|
||||
<aside class="wrn-mega__featured" data-wrn-owner="MegaMenu" data-wrn-part="featured" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
|
||||
{#if featured.eyebrow}<p class="wrn-mega__eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="eyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{featured.eyebrow}</p>{/if}
|
||||
{#if featured.image}<img src='{featured.image}' alt='{featured.imageAlt || ""}' loading="lazy" />{/if}
|
||||
{#if featured.title}<strong>{featured.title}</strong>{/if}
|
||||
{#if featured.description}<p>{featured.description}</p>{/if}
|
||||
{#if featured.actionLabel}<a href='{featured.actionHref || "#"}'>{featured.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
|
||||
{#if featured.actionLabel}<a href='{featured.actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{featured.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if footer || actionLabel}<div class="wrn-mega__footer"><span>{footer}</span>{#if actionLabel}<a href='{actionHref || "#"}'>{actionLabel}<span class='{actionIcon}' aria-hidden="true"></span></a>{/if}</div>{/if}
|
||||
{#if footer || actionLabel}<div class="wrn-mega__footer" data-wrn-owner="MegaMenu" data-wrn-part="footer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span>{footer}</span>{#if actionLabel}<a href='{actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{actionLabel}<span class='{actionIcon}' aria-hidden="true"></span></a>{/if}</div>{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user