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
@@ -57,59 +57,59 @@ component SplitHero {
|
||||
style='--wrn-split-title-max-width: {titleMaxWidth || "18ch"}'
|
||||
data-visual-style='{visualStyle}'
|
||||
class='wrn-split-hero {class}'
|
||||
>
|
||||
data-wrn-owner="SplitHero" data-wrn-part="root" data-wrn-component="SplitHero" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
{#if backgroundImage}
|
||||
<img
|
||||
src='{backgroundImage}'
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="wrn-split-hero__background-image"
|
||||
/>
|
||||
data-wrn-owner="SplitHero" data-wrn-part="backgroundImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-split-hero__glow wrn-split-hero__glow--one" aria-hidden="true"></div>
|
||||
<div class="wrn-split-hero__glow wrn-split-hero__glow--two" aria-hidden="true"></div>
|
||||
<div class="wrn-split-hero__glow wrn-split-hero__glow--one" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
||||
<div class="wrn-split-hero__glow wrn-split-hero__glow--two" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
||||
|
||||
<div class="wrn-split-hero__inner">
|
||||
<div class="wrn-split-hero__layout">
|
||||
<div class="wrn-split-hero__content">
|
||||
<div class="wrn-split-hero__inner" data-wrn-owner="SplitHero" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-split-hero__layout" data-wrn-owner="SplitHero" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-split-hero__content" data-wrn-owner="SplitHero" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if eyebrow}
|
||||
<div class="wrn-split-hero__eyebrow">
|
||||
<div class="wrn-split-hero__eyebrow" data-wrn-owner="SplitHero" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if eyebrowIcon}
|
||||
<span class='wrn-split-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-split-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="eyebrowIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span>{eyebrow}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h1 class="wrn-split-hero__title">
|
||||
<h1 class="wrn-split-hero__title" data-wrn-owner="SplitHero" 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-split-hero__highlight">{highlight}</span>
|
||||
<span class="wrn-split-hero__highlight" data-wrn-owner="SplitHero" 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-split-hero__description">{description}</p>
|
||||
<p class="wrn-split-hero__description" data-wrn-owner="SplitHero" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
||||
{/if}
|
||||
|
||||
<slot></slot>
|
||||
|
||||
{#if primaryLabel || secondaryLabel}
|
||||
<div class="wrn-split-hero__actions">
|
||||
<div class="wrn-split-hero__actions" data-wrn-owner="SplitHero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if primaryLabel}
|
||||
<a href='{primaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--primary">
|
||||
<a href='{primaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--primary" data-wrn-owner="SplitHero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if primaryIcon}
|
||||
<span class='wrn-split-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-split-hero__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span>{primaryLabel}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if secondaryLabel}
|
||||
<a href='{secondaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--secondary">
|
||||
<a href='{secondaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--secondary" data-wrn-owner="SplitHero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if secondaryIcon}
|
||||
<span class='wrn-split-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
|
||||
<span class='wrn-split-hero__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="SplitHero" 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>
|
||||
@@ -118,15 +118,15 @@ component SplitHero {
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="wrn-split-hero__actions wrn-split-hero__actions--slot">
|
||||
<div class="wrn-split-hero__actions wrn-split-hero__actions--slot" data-wrn-owner="SplitHero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if trustItems.length > 0}
|
||||
<div class="wrn-split-hero__trust">
|
||||
<div class="wrn-split-hero__trust" data-wrn-owner="SplitHero" 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-split-hero__trust-item">
|
||||
<span class="wrn-split-hero__trust-item" data-wrn-owner="SplitHero" data-wrn-part="trustItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{item.icon || "icon-[lucide--check-circle-2]"}' aria-hidden="true"></span>
|
||||
<span>{item.label || item.title || item}</span>
|
||||
</span>
|
||||
@@ -137,53 +137,53 @@ component SplitHero {
|
||||
<slot name="trust"></slot>
|
||||
</div>
|
||||
|
||||
<div class="wrn-split-hero__visual-column">
|
||||
<div class="wrn-split-hero__visual-column" data-wrn-owner="SplitHero" data-wrn-part="visualColumn" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="visual"></slot>
|
||||
|
||||
{#if visualImage || visualIcon || visualEyebrow || visualTitle || visualDescription || visualItems.length > 0}
|
||||
<div class="wrn-split-hero__visual">
|
||||
<div class="wrn-split-hero__visual" data-wrn-owner="SplitHero" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualImage}
|
||||
<div class="wrn-split-hero__visual-media">
|
||||
<img src='{visualImage}' alt='{visualAlt}' class="wrn-split-hero__visual-image" />
|
||||
<div class="wrn-split-hero__visual-media" data-wrn-owner="SplitHero" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<img src='{visualImage}' alt='{visualAlt}' class="wrn-split-hero__visual-image" data-wrn-owner="SplitHero" 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-split-hero__visual-header">
|
||||
<div class="wrn-split-hero__visual-header" data-wrn-owner="SplitHero" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualIcon}
|
||||
<div class="wrn-split-hero__visual-icon" aria-hidden="true">
|
||||
<div class="wrn-split-hero__visual-icon" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{visualIcon}'></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-split-hero__visual-copy">
|
||||
<div class="wrn-split-hero__visual-copy" data-wrn-owner="SplitHero" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if visualEyebrow}
|
||||
<p class="wrn-split-hero__visual-eyebrow">{visualEyebrow}</p>
|
||||
<p class="wrn-split-hero__visual-eyebrow" data-wrn-owner="SplitHero" 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-split-hero__visual-title">{visualTitle}</h2>
|
||||
<h2 class="wrn-split-hero__visual-title" data-wrn-owner="SplitHero" 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-split-hero__visual-description">{visualDescription}</p>
|
||||
<p class="wrn-split-hero__visual-description" data-wrn-owner="SplitHero" 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-split-hero__visual-list">
|
||||
<div class="wrn-split-hero__visual-list" data-wrn-owner="SplitHero" data-wrn-part="visualList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#each visualItems as item}
|
||||
<div class="wrn-split-hero__visual-item">
|
||||
<div class="wrn-split-hero__visual-item" data-wrn-owner="SplitHero" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<div class="wrn-split-hero__visual-item-icon" aria-hidden="true">
|
||||
<div class="wrn-split-hero__visual-item-icon" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{item.icon}'></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wrn-split-hero__visual-item-copy">
|
||||
<div class="wrn-split-hero__visual-item-heading">
|
||||
<div class="wrn-split-hero__visual-item-copy" data-wrn-owner="SplitHero" data-wrn-part="visualItemCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div class="wrn-split-hero__visual-item-heading" data-wrn-owner="SplitHero" data-wrn-part="visualItemHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<strong>{item.label || item.title}</strong>
|
||||
{#if item.value}
|
||||
<span>{item.value}</span>
|
||||
|
||||
Reference in new issue
Block a user