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
@@ -82,7 +82,7 @@ open: boolean = false
|
||||
data-scrollable='{scrollable ? "true" : "false"}'
|
||||
class='wrn-drawer {class}'
|
||||
style='--drawer-duration: {duration}ms'
|
||||
>
|
||||
data-wrn-owner="Drawer" data-wrn-part="root" data-wrn-component="Drawer" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
|
||||
{#if triggerLabel}
|
||||
<button
|
||||
@@ -91,7 +91,7 @@ open: boolean = false
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded='{open || visible ? "true" : "false"}'
|
||||
@click='showDrawer(event)'
|
||||
>
|
||||
data-wrn-owner="Drawer" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if triggerIcon}
|
||||
<span class='{triggerIcon}' aria-hidden="true"></span>
|
||||
{/if}
|
||||
@@ -99,7 +99,7 @@ open: boolean = false
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<span class="wrn-drawer__trigger-slot" @click='showDrawer(event)'>
|
||||
<span class="wrn-drawer__trigger-slot" @click='showDrawer(event)' data-wrn-owner="Drawer" data-wrn-part="triggerSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="trigger"></slot>
|
||||
</span>
|
||||
|
||||
@@ -107,14 +107,14 @@ open: boolean = false
|
||||
class="wrn-drawer__layer"
|
||||
role="presentation"
|
||||
@keydown='handleKeydown(event)'
|
||||
>
|
||||
data-wrn-owner="Drawer" data-wrn-part="layer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if overlay}
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-drawer__backdrop"
|
||||
aria-label='{closeLabel}'
|
||||
@click='if (closeOnBackdrop) { cancelDrawer(event) }'
|
||||
></button>
|
||||
data-wrn-owner="Drawer" data-wrn-part="backdrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
|
||||
{/if}
|
||||
|
||||
<section
|
||||
@@ -123,19 +123,19 @@ open: boolean = false
|
||||
aria-modal="true"
|
||||
aria-label='{label || title}'
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="wrn-drawer__handle" aria-hidden="true"></div>
|
||||
data-wrn-owner="Drawer" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-drawer__handle" aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="handle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
||||
|
||||
<header class="wrn-drawer__header">
|
||||
<div class="wrn-drawer__heading">
|
||||
<header class="wrn-drawer__header" data-wrn-owner="Drawer" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-drawer__heading" data-wrn-owner="Drawer" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if icon}
|
||||
<span class='wrn-drawer__icon {icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-drawer__icon {icon}' aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-drawer__heading-copy">
|
||||
<div class="wrn-drawer__heading-copy" data-wrn-owner="Drawer" 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}
|
||||
<h2>{title}</h2>
|
||||
<h2 data-wrn-owner="Drawer" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h2>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p>{description}</p>
|
||||
@@ -149,17 +149,17 @@ open: boolean = false
|
||||
class="wrn-drawer__close"
|
||||
aria-label='{closeLabel}'
|
||||
@click='hideDrawer("close-button", event)'
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" /></svg>
|
||||
data-wrn-owner="Drawer" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false" data-wrn-owner="Drawer" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M6 6l12 12M18 6 6 18" /></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<div class="wrn-drawer__body">
|
||||
<div class="wrn-drawer__body" data-wrn-owner="Drawer" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<footer class="wrn-drawer__footer">
|
||||
<footer class="wrn-drawer__footer" data-wrn-owner="Drawer" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="footer"></slot>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user