feat: release design system engine, studio and component contracts
This commit is contained in:
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -93,7 +93,7 @@ component Popover {
|
||||
data-variant='{variant}'
|
||||
class='wrn-popover {class}'
|
||||
@keydown='handleKeydown(event)'
|
||||
>
|
||||
data-wrn-owner="Popover" data-wrn-part="root" data-wrn-component="Popover" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-popover__trigger"
|
||||
@@ -101,7 +101,7 @@ component Popover {
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded='{open || visible ? "true" : "false"}'
|
||||
@click='togglePopover(event)'
|
||||
>
|
||||
data-wrn-owner="Popover" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="trigger"></slot>
|
||||
{#if triggerIcon}
|
||||
<span class='{triggerIcon}' aria-hidden="true"></span>
|
||||
@@ -118,7 +118,7 @@ component Popover {
|
||||
data-show='{open || visible}'
|
||||
aria-label='{closeLabel}'
|
||||
@click='hidePopover("outside", event)'
|
||||
></button>
|
||||
data-wrn-owner="Popover" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
|
||||
{/if}
|
||||
|
||||
<section
|
||||
@@ -127,21 +127,21 @@ component Popover {
|
||||
data-show='{open || visible}'
|
||||
role="dialog"
|
||||
aria-label='{title || triggerLabel}'
|
||||
>
|
||||
data-wrn-owner="Popover" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if showArrow}
|
||||
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
|
||||
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="arrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
{#if title || description || icon || showClose}
|
||||
<header class="wrn-popover__header">
|
||||
<div class="wrn-popover__heading">
|
||||
<header class="wrn-popover__header" data-wrn-owner="Popover" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-popover__heading" data-wrn-owner="Popover" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if icon}
|
||||
<span class='wrn-popover__icon {icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-popover__icon {icon}' aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<div class="wrn-popover__heading-copy">
|
||||
<div class="wrn-popover__heading-copy" data-wrn-owner="Popover" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="header"></slot>
|
||||
{#if title}
|
||||
<h3>{title}</h3>
|
||||
<h3 data-wrn-owner="Popover" 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>{description}</p>
|
||||
@@ -155,25 +155,25 @@ component Popover {
|
||||
class="wrn-popover__close"
|
||||
aria-label='{closeLabel}'
|
||||
@click='hidePopover("close-button", event)'
|
||||
>
|
||||
data-wrn-owner="Popover" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-popover__body">
|
||||
<div class="wrn-popover__body" data-wrn-owner="Popover" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
{#if actionLabel}
|
||||
<footer class="wrn-popover__footer">
|
||||
<footer class="wrn-popover__footer" data-wrn-owner="Popover" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if actionHref}
|
||||
<a
|
||||
href='{actionHref}'
|
||||
class="wrn-popover__action"
|
||||
@click='activateAction(event)'
|
||||
>
|
||||
data-wrn-owner="Popover" 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='{actionIcon}' aria-hidden="true"></span>
|
||||
@@ -186,7 +186,7 @@ component Popover {
|
||||
type="button"
|
||||
class="wrn-popover__action"
|
||||
@click='activateAction(event)'
|
||||
>
|
||||
data-wrn-owner="Popover" 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='{actionIcon}' aria-hidden="true"></span>
|
||||
|
||||
Reference in new issue
Block a user