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

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/Timeline.wrn
+18 -18
View File
@@ -37,32 +37,32 @@ component Timeline {
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
>
data-wrn-owner="Timeline" data-wrn-part="root" data-wrn-component="Timeline" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if title || description}
<header class="wrn-timeline__header">
<header class="wrn-timeline__header" data-wrn-owner="Timeline" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}
<h3 class="wrn-timeline__title">{title}</h3>
<h3 class="wrn-timeline__title" data-wrn-owner="Timeline" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{/if}
{#if description}
<p class="wrn-timeline__description">{description}</p>
<p class="wrn-timeline__description" data-wrn-owner="Timeline" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</header>
{/if}
<ol class="wrn-timeline__list">
<ol class="wrn-timeline__list" data-wrn-owner="Timeline" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<li
class="wrn-timeline__item"
data-status='{statusOf(item, index)}'
data-interactive='{item.href ? "true" : "false"}'
@click='output.select({ item: item, index: index })'
>
data-wrn-owner="Timeline" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class="wrn-timeline__marker"
data-status='{statusOf(item, index)}'
>
data-wrn-owner="Timeline" data-wrn-part="marker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if numbered}
<span class="wrn-timeline__number" aria-hidden="true">{index + 1}</span>
<span class="wrn-timeline__number" aria-hidden="true" data-wrn-owner="Timeline" data-wrn-part="number" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{index + 1}</span>
{:else}
<span class='{item.icon || "icon-[lucide--circle-check]"}' aria-hidden="true"></span>
{/if}
@@ -71,8 +71,8 @@ component Timeline {
<article
class="wrn-timeline__card"
data-variant='{variant}'
>
<div class="wrn-timeline__card-header">
data-wrn-owner="Timeline" data-wrn-part="card" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
<div class="wrn-timeline__card-header" data-wrn-owner="Timeline" data-wrn-part="cardHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div>
<!--
Items sit under this component's own title when it has one.
@@ -81,33 +81,33 @@ component Timeline {
the page's heading order.
-->
{#if title}
<h4 class="wrn-timeline__item-title">{item.title || item.label}</h4>
<h4 class="wrn-timeline__item-title" data-wrn-owner="Timeline" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</h4>
{:else}
<h3 class="wrn-timeline__item-title">{item.title || item.label}</h3>
<h3 class="wrn-timeline__item-title" data-wrn-owner="Timeline" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</h3>
{/if}
{#if item.subtitle}
<p class="wrn-timeline__subtitle">{item.subtitle}</p>
<p class="wrn-timeline__subtitle" data-wrn-owner="Timeline" data-wrn-part="subtitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.subtitle}</p>
{/if}
</div>
{#if item.date || item.time || item.meta}
<time class="wrn-timeline__time">{item.date || item.time || item.meta}</time>
<time class="wrn-timeline__time" data-wrn-owner="Timeline" data-wrn-part="time" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.date || item.time || item.meta}</time>
{/if}
</div>
{#if item.description}
<p class="wrn-timeline__copy">{item.description}</p>
<p class="wrn-timeline__copy" data-wrn-owner="Timeline" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
{/if}
{#if item.href}
<a href='{item.href}' class="wrn-timeline__action">
<a href='{item.href}' class="wrn-timeline__action" data-wrn-owner="Timeline" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{item.actionLabel || "View details"}</span>
<span class="icon-[lucide--arrow-right] wrn-timeline__action-icon" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wrn-timeline__action-icon" aria-hidden="true" data-wrn-owner="Timeline" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</a>
{/if}
</article>
</li>
{:empty}
<li class="wrn-timeline__empty">No timeline items available.</li>
<li class="wrn-timeline__empty" data-wrn-owner="Timeline" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">No timeline items available.</li>
{/each}
</ol>