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
@@ -63,54 +63,54 @@ component Hero {
|
||||
data-full-bleed='{fullBleed}'
|
||||
aria-label='{title}'
|
||||
class='wrn-hero {class}'
|
||||
>
|
||||
data-wrn-owner="Hero" data-wrn-part="root" data-wrn-component="Hero" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
{#if showDecorations}
|
||||
<div class="wrn-hero__decorations" aria-hidden="true">
|
||||
<span class="wrn-hero__glow wrn-hero__glow--one"></span>
|
||||
<span class="wrn-hero__glow wrn-hero__glow--two"></span>
|
||||
<span class="wrn-hero__grid-pattern"></span>
|
||||
<div class="wrn-hero__decorations" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="decorations" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="wrn-hero__glow wrn-hero__glow--one" data-wrn-owner="Hero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span class="wrn-hero__glow wrn-hero__glow--two" data-wrn-owner="Hero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span class="wrn-hero__grid-pattern" data-wrn-owner="Hero" data-wrn-part="gridPattern" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__inner">
|
||||
<div class="wrn-hero__layout">
|
||||
<div class="wrn-hero__content">
|
||||
<div class="wrn-hero__inner" data-wrn-owner="Hero" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-hero__layout" data-wrn-owner="Hero" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-hero__content" data-wrn-owner="Hero" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="eyebrow"></slot>
|
||||
|
||||
{#if eyebrow}
|
||||
<div class="wrn-hero__eyebrow">
|
||||
<div class="wrn-hero__eyebrow" data-wrn-owner="Hero" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if eyebrowIcon}
|
||||
<span class='wrn-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="eyebrowIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else}
|
||||
<span class="wrn-hero__eyebrow-dot" aria-hidden="true"></span>
|
||||
<span class="wrn-hero__eyebrow-dot" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="eyebrowDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span>{eyebrow}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__heading-row">
|
||||
<div class="wrn-hero__heading-row" data-wrn-owner="Hero" data-wrn-part="headingRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if icon}
|
||||
<div class="wrn-hero__icon" aria-hidden="true">
|
||||
<div class="wrn-hero__icon" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{icon}'></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__heading-copy">
|
||||
<h1 class="wrn-hero__title">
|
||||
<div class="wrn-hero__heading-copy" data-wrn-owner="Hero" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<h1 class="wrn-hero__title" data-wrn-owner="Hero" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{title}</span>
|
||||
{#if highlight}
|
||||
<span class="wrn-hero__highlight">{highlight}</span>
|
||||
<span class="wrn-hero__highlight" data-wrn-owner="Hero" data-wrn-part="highlight" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{highlight}</span>
|
||||
{/if}
|
||||
</h1>
|
||||
|
||||
{#if description}
|
||||
<p class="wrn-hero__description">{description}</p>
|
||||
<p class="wrn-hero__description" data-wrn-owner="Hero" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if badges.length > 0}
|
||||
<div class="wrn-hero__badges">
|
||||
<div class="wrn-hero__badges" data-wrn-owner="Hero" data-wrn-part="badges" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#each badges as badge}
|
||||
<Badge
|
||||
label='{badge.label || badge.title || badge}'
|
||||
@@ -123,17 +123,17 @@ component Hero {
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__actions">
|
||||
<div class="wrn-hero__actions" data-wrn-owner="Hero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if primaryLabel}
|
||||
<a
|
||||
href='{primaryHref || "#"}'
|
||||
target='{primaryTarget}'
|
||||
rel='{primaryTarget === "_blank" ? "noopener noreferrer" : ""}'
|
||||
class="wrn-hero__action wrn-hero__action--primary"
|
||||
>
|
||||
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{primaryLabel}</span>
|
||||
{#if primaryIcon}
|
||||
<span class='wrn-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-hero__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
@@ -144,9 +144,9 @@ component Hero {
|
||||
target='{secondaryTarget}'
|
||||
rel='{secondaryTarget === "_blank" ? "noopener noreferrer" : ""}'
|
||||
class="wrn-hero__action wrn-hero__action--secondary"
|
||||
>
|
||||
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if secondaryIcon}
|
||||
<span class='wrn-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-hero__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span>{secondaryLabel}</span>
|
||||
</a>
|
||||
@@ -158,10 +158,10 @@ component Hero {
|
||||
target='{tertiaryTarget}'
|
||||
rel='{tertiaryTarget === "_blank" ? "noopener noreferrer" : ""}'
|
||||
class="wrn-hero__action wrn-hero__action--tertiary"
|
||||
>
|
||||
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{tertiaryLabel}</span>
|
||||
{#if tertiaryIcon}
|
||||
<span class='wrn-hero__action-icon {tertiaryIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-hero__action-icon {tertiaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
@@ -170,13 +170,13 @@ component Hero {
|
||||
</div>
|
||||
|
||||
{#if trustItems.length > 0}
|
||||
<div class="wrn-hero__trust" aria-label="Highlights">
|
||||
<div class="wrn-hero__trust" aria-label="Highlights" data-wrn-owner="Hero" data-wrn-part="trust" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#each trustItems as item}
|
||||
<span class="wrn-hero__trust-item">
|
||||
<span class="wrn-hero__trust-item" data-wrn-owner="Hero" data-wrn-part="trustItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
class='wrn-hero__trust-icon {(item.icon || "icon-[lucide--check-circle-2]")}'
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
data-wrn-owner="Hero" data-wrn-part="trustIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span>{item.label || item.title || item}</span>
|
||||
</span>
|
||||
{/each}
|
||||
@@ -187,62 +187,62 @@ component Hero {
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div class="wrn-hero__visual">
|
||||
<div class="wrn-hero__visual" data-wrn-owner="Hero" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="visual"></slot>
|
||||
|
||||
{#if visualImage || visualTitle || visualDescription || visualItems.length > 0}
|
||||
<div class="wrn-hero__visual-card">
|
||||
<div class="wrn-hero__visual-card" data-wrn-owner="Hero" data-wrn-part="visualCard" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualImage}
|
||||
<div class="wrn-hero__visual-media">
|
||||
<div class="wrn-hero__visual-media" data-wrn-owner="Hero" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<img
|
||||
src='{visualImage}'
|
||||
alt='{visualAlt || visualTitle || title}'
|
||||
class="wrn-hero__visual-image"
|
||||
/>
|
||||
data-wrn-owner="Hero" data-wrn-part="visualImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if visualIcon || visualEyebrow || visualTitle || visualDescription}
|
||||
<div class="wrn-hero__visual-header">
|
||||
<div class="wrn-hero__visual-header" data-wrn-owner="Hero" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualIcon}
|
||||
<span class="wrn-hero__visual-icon" aria-hidden="true">
|
||||
<span class="wrn-hero__visual-icon" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{visualIcon}'></span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__visual-copy">
|
||||
<div class="wrn-hero__visual-copy" data-wrn-owner="Hero" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualEyebrow}
|
||||
<p class="wrn-hero__visual-eyebrow">{visualEyebrow}</p>
|
||||
<p class="wrn-hero__visual-eyebrow" data-wrn-owner="Hero" data-wrn-part="visualEyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualEyebrow}</p>
|
||||
{/if}
|
||||
|
||||
{#if visualTitle}
|
||||
<h2 class="wrn-hero__visual-title">{visualTitle}</h2>
|
||||
<h2 class="wrn-hero__visual-title" data-wrn-owner="Hero" data-wrn-part="visualTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualTitle}</h2>
|
||||
{/if}
|
||||
|
||||
{#if visualDescription}
|
||||
<p class="wrn-hero__visual-description">{visualDescription}</p>
|
||||
<p class="wrn-hero__visual-description" data-wrn-owner="Hero" data-wrn-part="visualDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualDescription}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if visualItems.length > 0}
|
||||
<div class="wrn-hero__visual-items">
|
||||
<div class="wrn-hero__visual-items" data-wrn-owner="Hero" data-wrn-part="visualItems" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#each visualItems as item}
|
||||
<div class="wrn-hero__visual-item">
|
||||
<div class="wrn-hero__visual-item" data-wrn-owner="Hero" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class='wrn-hero__visual-item-icon {item.icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-hero__visual-item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-hero__visual-item-copy">
|
||||
<span class="wrn-hero__visual-item-label">{item.label || item.title}</span>
|
||||
<div class="wrn-hero__visual-item-copy" data-wrn-owner="Hero" data-wrn-part="visualItemCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="wrn-hero__visual-item-label" data-wrn-owner="Hero" data-wrn-part="visualItemLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
|
||||
{#if item.description}
|
||||
<span class="wrn-hero__visual-item-description">{item.description}</span>
|
||||
<span class="wrn-hero__visual-item-description" data-wrn-owner="Hero" data-wrn-part="visualItemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if item.value}
|
||||
<strong class="wrn-hero__visual-item-value">{item.value}</strong>
|
||||
<strong class="wrn-hero__visual-item-value" data-wrn-owner="Hero" data-wrn-part="visualItemValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.value}</strong>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
@@ -253,7 +253,7 @@ component Hero {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrn-hero__footer">
|
||||
<div class="wrn-hero__footer" data-wrn-owner="Hero" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user