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
@@ -105,14 +105,14 @@ component Accordion {
|
||||
data-indicator-position="{showIndicator ? indicatorPosition : 'none'}"
|
||||
data-multiple="{allowsMultiple() ? 'true' : 'false'}"
|
||||
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--accordion wrn-next--accordion-{variant} {bordered ? 'wrn-next--accordion-bordered' : ''} {separated ? 'wrn-next--accordion-separated' : ''} {flush ? 'wrn-next--accordion-flush' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
|
||||
>
|
||||
data-wrn-owner="Accordion" data-wrn-part="root" data-wrn-component="Accordion" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#each items as item, index}
|
||||
<section
|
||||
class="wrn-next__accordion-item"
|
||||
data-open="{isOpen(itemValue(item, index)) ? 'true' : 'false'}"
|
||||
data-disabled="{disabled || item.disabled ? 'true' : 'false'}"
|
||||
>
|
||||
<h3 class="wrn-next__accordion-heading">
|
||||
data-wrn-owner="Accordion" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<h3 class="wrn-next__accordion-heading" data-wrn-owner="Accordion" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<button
|
||||
type="button"
|
||||
id="{id}-trigger-{index}"
|
||||
@@ -120,9 +120,9 @@ component Accordion {
|
||||
aria-controls="{id}-panel-{index}"
|
||||
disabled="{disabled || item.disabled}"
|
||||
@click="toggleItem(event, itemValue(item, index), item)"
|
||||
>
|
||||
data-wrn-owner="Accordion" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if showIndicator && indicatorPosition === "start"}
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true">
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]"></span>
|
||||
{:else}
|
||||
@@ -132,7 +132,7 @@ component Accordion {
|
||||
{/if}
|
||||
<span>{item.label || item.title}</span>
|
||||
{#if showIndicator && indicatorPosition === "end"}
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true">
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]"></span>
|
||||
{:else}
|
||||
@@ -149,19 +149,19 @@ component Accordion {
|
||||
role="region"
|
||||
aria-labelledby="{id}-trigger-{index}"
|
||||
aria-hidden="{isOpen(itemValue(item, index)) ? 'false' : 'true'}"
|
||||
>
|
||||
data-wrn-owner="Accordion" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<div>
|
||||
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
|
||||
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}" data-wrn-owner="Accordion" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if item.content}<p>{item.content}</p>{/if}
|
||||
|
||||
{#if item.children && item.children.length > 0}
|
||||
<div class="wrn-next__accordion-nested">
|
||||
<div class="wrn-next__accordion-nested" data-wrn-owner="Accordion" data-wrn-part="nested" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#each item.children as child, childIndex}
|
||||
<section
|
||||
class="wrn-next__accordion-item"
|
||||
data-open="{isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'}"
|
||||
>
|
||||
<h4 class="wrn-next__accordion-heading">
|
||||
data-wrn-owner="Accordion" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<h4 class="wrn-next__accordion-heading" data-wrn-owner="Accordion" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<button
|
||||
type="button"
|
||||
id="{id}-trigger-{index}-{childIndex}"
|
||||
@@ -169,9 +169,9 @@ component Accordion {
|
||||
aria-controls="{id}-panel-{index}-{childIndex}"
|
||||
disabled="{disabled || child.disabled}"
|
||||
@click="toggleItem(event, nestedValue(item, index, child, childIndex), child)"
|
||||
>
|
||||
data-wrn-owner="Accordion" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if showIndicator}
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true">
|
||||
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]"></span>
|
||||
{:else}
|
||||
@@ -188,9 +188,9 @@ component Accordion {
|
||||
role="region"
|
||||
aria-labelledby="{id}-trigger-{index}-{childIndex}"
|
||||
aria-hidden="{isOpen(nestedValue(item, index, child, childIndex)) ? 'false' : 'true'}"
|
||||
>
|
||||
data-wrn-owner="Accordion" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<div>
|
||||
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
|
||||
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}" data-wrn-owner="Accordion" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
|
||||
<p>{child.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user