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
@@ -18,14 +18,14 @@ component List {
|
||||
data-ui-component="List"
|
||||
aria-label='{title}'
|
||||
class='wrn-list {class}'
|
||||
>
|
||||
data-wrn-owner="List" data-wrn-part="root" data-wrn-component="List" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if title || description}
|
||||
<header class="wrn-list__header">
|
||||
<header class="wrn-list__header" data-wrn-owner="List" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if title}
|
||||
<h3 class="wrn-list__title">{title}</h3>
|
||||
<h3 class="wrn-list__title" data-wrn-owner="List" 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-list__description">{description}</p>
|
||||
<p class="wrn-list__description" data-wrn-owner="List" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
||||
{/if}
|
||||
</header>
|
||||
{/if}
|
||||
@@ -33,60 +33,60 @@ component List {
|
||||
<ul
|
||||
class="wrn-list__items"
|
||||
data-variant='{variant}'
|
||||
>
|
||||
data-wrn-owner="List" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
|
||||
{#each items as item, index}
|
||||
<li
|
||||
class="wrn-list__item"
|
||||
data-variant='{variant}'
|
||||
@click='if (!item.href) { output.select({ item: item, index: index }) }'
|
||||
>
|
||||
data-wrn-owner="List" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
|
||||
{#if item.href}
|
||||
<a
|
||||
href='{item.href}'
|
||||
class="wrn-list__row"
|
||||
data-size='{size}'
|
||||
@click='output.select({ item: item, index: index })'
|
||||
>
|
||||
data-wrn-owner="List" data-wrn-part="row" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class="wrn-list__leading-icon"><span class='{item.icon}' aria-hidden="true"></span>
|
||||
<span class="wrn-list__leading-icon" data-wrn-owner="List" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class='{item.icon}' aria-hidden="true"></span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if item.imageSrc}
|
||||
<img src='{item.imageSrc}' alt='{item.imageAlt || ""}' class="wrn-list__image" loading="lazy" />
|
||||
<img src='{item.imageSrc}' alt='{item.imageAlt || ""}' class="wrn-list__image" loading="lazy" data-wrn-owner="List" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
|
||||
{/if}
|
||||
<div class="wrn-list__body">
|
||||
<div class="wrn-list__heading">
|
||||
<p class="wrn-list__item-title">{item.title || item.label}</p>
|
||||
<div class="wrn-list__body" data-wrn-owner="List" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-list__heading" data-wrn-owner="List" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<p class="wrn-list__item-title" data-wrn-owner="List" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</p>
|
||||
{#if item.meta}
|
||||
<span class="wrn-list__meta">{item.meta}</span>
|
||||
<span class="wrn-list__meta" data-wrn-owner="List" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.meta}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if item.description}
|
||||
<p class="wrn-list__item-description">{item.description}</p>
|
||||
<p class="wrn-list__item-description" data-wrn-owner="List" data-wrn-part="itemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
|
||||
{/if}
|
||||
{#if item.badge}
|
||||
<span class="wrn-list__badge">{item.badge}</span>
|
||||
<span class="wrn-list__badge" data-wrn-owner="List" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="icon-[lucide--chevron-right] wrn-list__chevron" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--chevron-right] wrn-list__chevron" aria-hidden="true" data-wrn-owner="List" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="wrn-list__row" data-size='{size}'>
|
||||
<div class="wrn-list__row" data-size='{size}' data-wrn-owner="List" data-wrn-part="row" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class="wrn-list__leading-icon"><span class='{item.icon}' aria-hidden="true"></span>
|
||||
<span class="wrn-list__leading-icon" data-wrn-owner="List" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class='{item.icon}' aria-hidden="true"></span>
|
||||
</span>
|
||||
{/if}
|
||||
<div class="wrn-list__body">
|
||||
<p class="wrn-list__item-title">{item.title || item.label}</p>
|
||||
<div class="wrn-list__body" data-wrn-owner="List" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<p class="wrn-list__item-title" data-wrn-owner="List" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</p>
|
||||
{#if item.description}
|
||||
<p class="wrn-list__item-description">{item.description}</p>
|
||||
<p class="wrn-list__item-description" data-wrn-owner="List" data-wrn-part="itemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{:empty}
|
||||
<li class="wrn-list__empty">
|
||||
<li class="wrn-list__empty" data-wrn-owner="List" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
No items available.
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
Reference in new issue
Block a user