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
@@ -32,73 +32,73 @@ component StatsBar {
|
||||
data-radius='{radius}' data-shadow='{shadow}' data-gutter='{gutter}' data-outer-spacing='{outerSpacing}' data-mobile-columns='{mobileColumns}'
|
||||
class='wrn-stats-bar {class}'
|
||||
aria-label="Key statistics"
|
||||
>
|
||||
<div class="wrn-stats-bar__inner">
|
||||
<div class="wrn-stats-bar__surface">
|
||||
data-wrn-owner="StatsBar" data-wrn-part="root" data-wrn-component="StatsBar" data-wrn-axis-compact='{compact ? "true" : "false"}' data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}' data-wrn-axis-radius='{radius}' data-wrn-axis-shadow='{shadow}'>
|
||||
<div class="wrn-stats-bar__inner" data-wrn-owner="StatsBar" data-wrn-part="inner" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
<div class="wrn-stats-bar__surface" data-wrn-owner="StatsBar" data-wrn-part="surface" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
{#each items as item, itemIndex}
|
||||
<article
|
||||
class="wrn-stats-bar__item"
|
||||
data-color='{item.color || color}'
|
||||
data-index='{itemIndex}'
|
||||
>
|
||||
<div class="wrn-stats-bar__content">
|
||||
data-wrn-owner="StatsBar" data-wrn-part="item" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color='{item.color || color}' data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
<div class="wrn-stats-bar__content" data-wrn-owner="StatsBar" data-wrn-part="content" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
{#if item.label}
|
||||
<p class="wrn-stats-bar__label">{item.label}</p>
|
||||
<p class="wrn-stats-bar__label" data-wrn-owner="StatsBar" data-wrn-part="label" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.label}</p>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-stats-bar__value-row">
|
||||
<strong class="wrn-stats-bar__value">{item.value}</strong>
|
||||
<div class="wrn-stats-bar__value-row" data-wrn-owner="StatsBar" data-wrn-part="valueRow" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
<strong class="wrn-stats-bar__value" data-wrn-owner="StatsBar" data-wrn-part="value" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.value}</strong>
|
||||
|
||||
{#if item.suffix}
|
||||
<span class="wrn-stats-bar__suffix">{item.suffix}</span>
|
||||
<span class="wrn-stats-bar__suffix" data-wrn-owner="StatsBar" data-wrn-part="suffix" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.suffix}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if item.description}
|
||||
<p class="wrn-stats-bar__description">{item.description}</p>
|
||||
<p class="wrn-stats-bar__description" data-wrn-owner="StatsBar" data-wrn-part="description" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.description}</p>
|
||||
{/if}
|
||||
|
||||
{#if item.trend || item.trendLabel}
|
||||
<div
|
||||
class="wrn-stats-bar__trend"
|
||||
data-direction='{item.trendDirection || "neutral"}'
|
||||
>
|
||||
data-wrn-owner="StatsBar" data-wrn-part="trend" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
{#if item.trendDirection === "up"}
|
||||
<span
|
||||
class="icon-[lucide--trending-up] wrn-stats-bar__trend-icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
|
||||
{:else if item.trendDirection === "down"}
|
||||
<span
|
||||
class="icon-[lucide--trending-down] wrn-stats-bar__trend-icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
|
||||
{:else}
|
||||
<span
|
||||
class="icon-[lucide--minus] wrn-stats-bar__trend-icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
|
||||
{/if}
|
||||
|
||||
{#if item.trend}
|
||||
<span class="wrn-stats-bar__trend-value">{item.trend}</span>
|
||||
<span class="wrn-stats-bar__trend-value" data-wrn-owner="StatsBar" data-wrn-part="trendValue" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.trend}</span>
|
||||
{/if}
|
||||
|
||||
{#if item.trendLabel}
|
||||
<span class="wrn-stats-bar__trend-label">{item.trendLabel}</span>
|
||||
<span class="wrn-stats-bar__trend-label" data-wrn-owner="StatsBar" data-wrn-part="trendLabel" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.trendLabel}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if icons && item.icon}
|
||||
<div class="wrn-stats-bar__icon" aria-hidden="true">
|
||||
<div class="wrn-stats-bar__icon" aria-hidden="true" data-wrn-owner="StatsBar" data-wrn-part="icon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
|
||||
<span class='{item.icon}'></span>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{:empty}
|
||||
<div class="wrn-stats-bar__empty" role="status">No statistics are available.</div>
|
||||
<div class="wrn-stats-bar__empty" role="status" data-wrn-owner="StatsBar" data-wrn-part="empty" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">No statistics are available.</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user