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
@@ -106,23 +106,23 @@ component Sidebar {
|
||||
data-color='{color}'
|
||||
data-size='{size}'
|
||||
data-mobile='{mobile ? "true" : "false"}'
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="root" data-wrn-component="Sidebar" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-sidebar__launcher"
|
||||
aria-label='{mobileLabel}'
|
||||
aria-expanded='{drawerOpen}'
|
||||
@click='openDrawer(event)'
|
||||
>
|
||||
<span class="wrn-sidebar__launcher-bar" aria-hidden="true"></span>
|
||||
<span class="wrn-sidebar__launcher-text">{mobileLabel}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="launcher" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span class="wrn-sidebar__launcher-bar" aria-hidden="true" data-wrn-owner="Sidebar" data-wrn-part="launcherBar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
||||
<span class="wrn-sidebar__launcher-text" data-wrn-owner="Sidebar" data-wrn-part="launcherText" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{mobileLabel}</span>
|
||||
</button>
|
||||
|
||||
<nav class="wrn-sidebar__rail" aria-label='{label}'>
|
||||
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
|
||||
<nav class="wrn-sidebar__rail" aria-label='{label}' data-wrn-owner="Sidebar" data-wrn-part="rail" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<ul class="wrn-sidebar__list" data-wrn-roving="vertical" data-wrn-owner="Sidebar" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each entryList() as entry}
|
||||
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
|
||||
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
|
||||
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}' data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<p class="wrn-sidebar__heading" data-show="entry.heading" data-wrn-owner="Sidebar" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.heading}</p>
|
||||
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(entry) ? "wrn-sidebar__link--active" : ""}'
|
||||
@@ -134,19 +134,19 @@ component Sidebar {
|
||||
aria-disabled='{entry.disabled ? "true" : "false"}'
|
||||
tabindex='{entry.disabled ? "-1" : "0"}'
|
||||
@click='choose(entry, 1, event)'
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span
|
||||
class='wrn-sidebar__icon {entry.icon}'
|
||||
data-show="entry.icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="wrn-sidebar__label">{entry.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="entry.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.badge}</span>
|
||||
</a>
|
||||
|
||||
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
|
||||
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0" data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each childrenOf(entry) as child}
|
||||
<li class="wrn-sidebar__entry">
|
||||
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(child) ? "wrn-sidebar__link--active" : ""}'
|
||||
href='{child.href || "#"}'
|
||||
@@ -156,22 +156,22 @@ component Sidebar {
|
||||
data-wrn-roving-item="true"
|
||||
tabindex='{child.disabled ? "-1" : "0"}'
|
||||
@click='choose(child, 2, event)'
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span
|
||||
class='wrn-sidebar__icon {child.icon}'
|
||||
data-show="child.icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="wrn-sidebar__label">{child.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="child.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.badge}</span>
|
||||
</a>
|
||||
|
||||
<ul
|
||||
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
|
||||
data-show="childrenOf(child).length > 0"
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each childrenOf(child) as leaf}
|
||||
<li class="wrn-sidebar__entry">
|
||||
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(leaf) ? "wrn-sidebar__link--active" : ""}'
|
||||
href='{leaf.href || "#"}'
|
||||
@@ -181,8 +181,8 @@ component Sidebar {
|
||||
data-wrn-roving-item="true"
|
||||
tabindex='{leaf.disabled ? "-1" : "0"}'
|
||||
@click='choose(leaf, 3, event)'
|
||||
>
|
||||
<span class="wrn-sidebar__label">{leaf.label}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{leaf.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -204,11 +204,11 @@ component Sidebar {
|
||||
label={label}
|
||||
@close="closeDrawer()"
|
||||
>
|
||||
<nav class="wrn-sidebar__drawer-nav" aria-label='{label}'>
|
||||
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
|
||||
<nav class="wrn-sidebar__drawer-nav" aria-label='{label}' data-wrn-owner="Sidebar" data-wrn-part="drawerNav" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<ul class="wrn-sidebar__list" data-wrn-roving="vertical" data-wrn-owner="Sidebar" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each entryList() as entry}
|
||||
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
|
||||
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
|
||||
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}' data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<p class="wrn-sidebar__heading" data-show="entry.heading" data-wrn-owner="Sidebar" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.heading}</p>
|
||||
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(entry) ? "wrn-sidebar__link--active" : ""}'
|
||||
@@ -220,19 +220,19 @@ component Sidebar {
|
||||
aria-disabled='{entry.disabled ? "true" : "false"}'
|
||||
tabindex='{entry.disabled ? "-1" : "0"}'
|
||||
@click='choose(entry, 1, event)'
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span
|
||||
class='wrn-sidebar__icon {entry.icon}'
|
||||
data-show="entry.icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="wrn-sidebar__label">{entry.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="entry.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.badge}</span>
|
||||
</a>
|
||||
|
||||
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
|
||||
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0" data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each childrenOf(entry) as child}
|
||||
<li class="wrn-sidebar__entry">
|
||||
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(child) ? "wrn-sidebar__link--active" : ""}'
|
||||
href='{child.href || "#"}'
|
||||
@@ -242,22 +242,22 @@ component Sidebar {
|
||||
data-wrn-roving-item="true"
|
||||
tabindex='{child.disabled ? "-1" : "0"}'
|
||||
@click='choose(child, 2, event)'
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span
|
||||
class='wrn-sidebar__icon {child.icon}'
|
||||
data-show="child.icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="wrn-sidebar__label">{child.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.label}</span>
|
||||
<span class="wrn-sidebar__badge" data-show="child.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.badge}</span>
|
||||
</a>
|
||||
|
||||
<ul
|
||||
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
|
||||
data-show="childrenOf(child).length > 0"
|
||||
>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
{#each childrenOf(child) as leaf}
|
||||
<li class="wrn-sidebar__entry">
|
||||
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<a
|
||||
class='wrn-sidebar__link {isActive(leaf) ? "wrn-sidebar__link--active" : ""}'
|
||||
href='{leaf.href || "#"}'
|
||||
@@ -267,8 +267,8 @@ component Sidebar {
|
||||
data-wrn-roving-item="true"
|
||||
tabindex='{leaf.disabled ? "-1" : "0"}'
|
||||
@click='choose(leaf, 3, event)'
|
||||
>
|
||||
<span class="wrn-sidebar__label">{leaf.label}</span>
|
||||
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||||
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{leaf.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
Reference in new issue
Block a user