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/FeatureCard.wrn
+21 -21
View File
@@ -50,58 +50,58 @@ component FeatureCard {
data-stretched-link='{stretchedLink ? "true" : "false"}'
class='wrn-feature-card {class}'
aria-disabled='{disabled ? "true" : "false"}'
>
data-wrn-owner="FeatureCard" data-wrn-part="root" data-wrn-component="FeatureCard" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if image}
<div class="wrn-feature-card__media">
<div class="wrn-feature-card__media" data-wrn-owner="FeatureCard" data-wrn-part="media" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<img
src='{image}'
alt='{imageAlt}'
loading='{imageLoading}'
class="wrn-feature-card__image"
/>
<div class="wrn-feature-card__media-overlay" aria-hidden="true"></div>
data-wrn-owner="FeatureCard" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
<div class="wrn-feature-card__media-overlay" aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="mediaOverlay" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
</div>
{/if}
<slot name="media"></slot>
<div class="wrn-feature-card__body">
<div class="wrn-feature-card__top">
<div class="wrn-feature-card__leading">
<div class="wrn-feature-card__body" data-wrn-owner="FeatureCard" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__top" data-wrn-owner="FeatureCard" data-wrn-part="top" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__leading" data-wrn-owner="FeatureCard" data-wrn-part="leading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="icon"></slot>
{#if icon}
<div class="wrn-feature-card__icon" aria-hidden="true">
<div class="wrn-feature-card__icon" aria-hidden="true" data-wrn-owner="FeatureCard" 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>
{#if badge}
<span class="wrn-feature-card__badge" data-color='{badgeColor}'>
<span class="wrn-feature-card__badge" data-color='{badgeColor}' data-wrn-owner="FeatureCard" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color='{badgeColor}' data-wrn-axis-variant="{variant}">
{badge}
</span>
{/if}
</div>
<div class="wrn-feature-card__copy">
<div class="wrn-feature-card__copy" data-wrn-owner="FeatureCard" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if eyebrow}
<p class="wrn-feature-card__eyebrow">{eyebrow}</p>
<p class="wrn-feature-card__eyebrow" data-wrn-owner="FeatureCard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{eyebrow}</p>
{/if}
<h3 class="wrn-feature-card__title">{title}</h3>
<h3 class="wrn-feature-card__title" data-wrn-owner="FeatureCard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{#if description}
<p class="wrn-feature-card__description">{description}</p>
<p class="wrn-feature-card__description" data-wrn-owner="FeatureCard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</div>
<div class="wrn-feature-card__content">
<div class="wrn-feature-card__content" data-wrn-owner="FeatureCard" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</div>
<div class="wrn-feature-card__footer">
<div class="wrn-feature-card__footer-content">
<div class="wrn-feature-card__footer" data-wrn-owner="FeatureCard" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__footer-content" data-wrn-owner="FeatureCard" data-wrn-part="footerContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="footer"></slot>
</div>
@@ -112,19 +112,19 @@ component FeatureCard {
rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
class="wrn-feature-card__action"
aria-label='{actionLabel + ": " + title}'
>
data-wrn-owner="FeatureCard" 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-feature-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-feature-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="FeatureCard" 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-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true" data-wrn-owner="FeatureCard" 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-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="FeatureCard" 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}
<span class="wrn-feature-card__action wrn-feature-card__action--disabled">
<span class="wrn-feature-card__action wrn-feature-card__action--disabled" data-wrn-owner="FeatureCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
</span>
{/if}