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
@@ -84,46 +84,46 @@ component MetricCard {
|
||||
@click='selectCard(event)'
|
||||
@keydown='if (selectable && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); selectCard(event) }'
|
||||
style='--wrn-metric-progress: {progress}%;'
|
||||
>
|
||||
<div class="wrn-metric-card__top">
|
||||
<div class="wrn-metric-card__heading">
|
||||
data-wrn-owner="MetricCard" data-wrn-part="root" data-wrn-component="MetricCard" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
<div class="wrn-metric-card__top" data-wrn-owner="MetricCard" data-wrn-part="top" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-metric-card__heading" data-wrn-owner="MetricCard" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if label}
|
||||
<p class="wrn-metric-card__label">{label}</p>
|
||||
<p class="wrn-metric-card__label" data-wrn-owner="MetricCard" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</p>
|
||||
{/if}
|
||||
|
||||
{#if badge}
|
||||
<span class="wrn-metric-card__badge">{badge}</span>
|
||||
<span class="wrn-metric-card__badge" data-wrn-owner="MetricCard" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{badge}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if icon}
|
||||
<div class="wrn-metric-card__icon" aria-hidden="true">
|
||||
<div class="wrn-metric-card__icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{icon}'></span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="wrn-metric-card__value-row">
|
||||
<div class="wrn-metric-card__value-row" data-wrn-owner="MetricCard" data-wrn-part="valueRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if prefix}
|
||||
<span class="wrn-metric-card__prefix">{prefix}</span>
|
||||
<span class="wrn-metric-card__prefix" data-wrn-owner="MetricCard" data-wrn-part="prefix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{prefix}</span>
|
||||
{/if}
|
||||
|
||||
<strong class="wrn-metric-card__value">{value}</strong>
|
||||
<strong class="wrn-metric-card__value" data-wrn-owner="MetricCard" data-wrn-part="value" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{value}</strong>
|
||||
|
||||
{#if suffix}
|
||||
<span class="wrn-metric-card__suffix">{suffix}</span>
|
||||
<span class="wrn-metric-card__suffix" data-wrn-owner="MetricCard" data-wrn-part="suffix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{suffix}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if description}
|
||||
<p class="wrn-metric-card__description">{description}</p>
|
||||
<p class="wrn-metric-card__description" data-wrn-owner="MetricCard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
||||
{/if}
|
||||
|
||||
<slot></slot>
|
||||
|
||||
{#if progress >= 0}
|
||||
<div class="wrn-metric-card__progress-block">
|
||||
<div class="wrn-metric-card__progress-meta">
|
||||
<div class="wrn-metric-card__progress-block" data-wrn-owner="MetricCard" data-wrn-part="progressBlock" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-metric-card__progress-meta" data-wrn-owner="MetricCard" data-wrn-part="progressMeta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{progressLabel || "Progress"}</span>
|
||||
<strong>{progress}%</strong>
|
||||
</div>
|
||||
@@ -134,8 +134,8 @@ component MetricCard {
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow='{progress}'
|
||||
>
|
||||
<span class="wrn-metric-card__progress-value"></span>
|
||||
data-wrn-owner="MetricCard" data-wrn-part="progressTrack" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="wrn-metric-card__progress-value" data-wrn-owner="MetricCard" data-wrn-part="progressValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -144,26 +144,26 @@ component MetricCard {
|
||||
<div
|
||||
class="wrn-metric-card__trend"
|
||||
data-direction='{trendDirection}'
|
||||
>
|
||||
data-wrn-owner="MetricCard" data-wrn-part="trend" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if trendDirection === "up" || trendDirection === "positive"}
|
||||
<span class="icon-[lucide--trending-up] wrn-metric-card__trend-icon" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--trending-up] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if trendDirection === "down" || trendDirection === "negative"}
|
||||
<span class="icon-[lucide--trending-down] wrn-metric-card__trend-icon" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--trending-down] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else}
|
||||
<span class="icon-[lucide--minus] wrn-metric-card__trend-icon" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--minus] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
{#if trend}
|
||||
<strong class="wrn-metric-card__trend-value">{trend}</strong>
|
||||
<strong class="wrn-metric-card__trend-value" data-wrn-owner="MetricCard" data-wrn-part="trendValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{trend}</strong>
|
||||
{/if}
|
||||
|
||||
{#if trendLabel}
|
||||
<span class="wrn-metric-card__trend-label">{trendLabel}</span>
|
||||
<span class="wrn-metric-card__trend-label" data-wrn-owner="MetricCard" data-wrn-part="trendLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{trendLabel}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-metric-card__footer">
|
||||
<div class="wrn-metric-card__footer" data-wrn-owner="MetricCard" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="footer"></slot>
|
||||
|
||||
{#if href}
|
||||
@@ -174,15 +174,15 @@ component MetricCard {
|
||||
class="wrn-metric-card__action"
|
||||
aria-disabled='{disabled ? "true" : "false"}'
|
||||
@click='activateAction(event)'
|
||||
>
|
||||
data-wrn-owner="MetricCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{actionLabel || "View details"}</span>
|
||||
|
||||
{#if actionIcon}
|
||||
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if external}
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if showArrow}
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</a>
|
||||
{:else if actionLabel}
|
||||
@@ -191,12 +191,12 @@ component MetricCard {
|
||||
class="wrn-metric-card__action"
|
||||
disabled='{disabled}'
|
||||
@click='activateAction(event)'
|
||||
>
|
||||
data-wrn-owner="MetricCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{actionLabel}</span>
|
||||
{#if actionIcon}
|
||||
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if showArrow}
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
|
||||
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
Reference in new issue
Block a user