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
@@ -35,13 +35,13 @@ label: string = "Button"
|
||||
}
|
||||
|
||||
view {
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="root" data-wrn-component="Button" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-action {fullWidth ? 'w-full' : ''} {class}"
|
||||
data-full-width="{fullWidth ? 'true' : 'false'}"
|
||||
>
|
||||
{#if as === "a" || (as === "" && href)}
|
||||
<!-- No aria-pressed here: it states a toggle button's state, and a link has none. -->
|
||||
<a
|
||||
<a data-wrn-owner="Button" data-wrn-part="control" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
{...attrs}
|
||||
href="{disabled || loading ? '' : href}"
|
||||
target="{target}"
|
||||
@@ -56,29 +56,29 @@ label: string = "Button"
|
||||
class="wrn-btn wrn-btn--variant-{variant} wrn-btn--color-{color} wrn-btn--size-{size} {pill ? 'wrn-btn--pill' : ''} {description ? 'wrn-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
|
||||
>
|
||||
{#if loading}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="spinner" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-spinner wrn-spinner--inline"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
{#if icon && !loading && iconPosition === "start"}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__icon {icon}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="copy" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wrn-visually-hidden' : ''}"
|
||||
>
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="label" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__label"
|
||||
>
|
||||
<slot>{loading ? loadingLabel : label}</slot>
|
||||
</span>
|
||||
{#if description && !loading}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="description" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__description"
|
||||
>
|
||||
{description}
|
||||
@@ -86,14 +86,14 @@ label: string = "Button"
|
||||
{/if}
|
||||
</span>
|
||||
{#if icon && !loading && iconPosition === "end"}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__icon {icon}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
{#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="tooltip" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__tooltip wrn-btn__tooltip--{tooltipPlacement}"
|
||||
data-placement="{tooltipPlacement}"
|
||||
role="tooltip"
|
||||
@@ -104,7 +104,7 @@ label: string = "Button"
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
<button data-wrn-owner="Button" data-wrn-part="control" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
{...attrs}
|
||||
type="{type}"
|
||||
title="{title}"
|
||||
@@ -118,29 +118,29 @@ label: string = "Button"
|
||||
class="wrn-btn wrn-btn--variant-{variant} wrn-btn--color-{color} wrn-btn--size-{size} {pill ? 'wrn-btn--pill' : ''} {description ? 'wrn-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
|
||||
>
|
||||
{#if loading}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="spinner" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-spinner wrn-spinner--inline"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
{#if icon && !loading && iconPosition === "start"}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__icon {icon}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="copy" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wrn-visually-hidden' : ''}"
|
||||
>
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="label" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__label"
|
||||
>
|
||||
<slot>{loading ? loadingLabel : label}</slot>
|
||||
</span>
|
||||
{#if description && !loading}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="description" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__description"
|
||||
>
|
||||
{description}
|
||||
@@ -148,14 +148,14 @@ label: string = "Button"
|
||||
{/if}
|
||||
</span>
|
||||
{#if icon && !loading && iconPosition === "end"}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__icon {icon}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
{#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
|
||||
<span
|
||||
<span data-wrn-owner="Button" data-wrn-part="tooltip" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
|
||||
class="wrn-btn__tooltip wrn-btn__tooltip--{tooltipPlacement}"
|
||||
data-placement="{tooltipPlacement}"
|
||||
role="tooltip"
|
||||
|
||||
Reference in new issue
Block a user