WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/CTASection.wrn
+31 -31
View File
@@ -48,56 +48,56 @@ component CTASection {
data-full-bleed='{fullBleed ? "true" : "false"}'
data-visual-position='{visualPosition}'
class='wrn-cta-section {class}'
>
<div class="wrn-cta-section__outer">
<div class="wrn-cta-section__surface">
data-wrn-owner="CTASection" data-wrn-part="root" data-wrn-component="CTASection" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}' data-wrn-axis-radius='{radius}'>
<div class="wrn-cta-section__outer" data-wrn-owner="CTASection" data-wrn-part="outer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<div class="wrn-cta-section__surface" data-wrn-owner="CTASection" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if backgroundImage}
<img
src='{backgroundImage}'
alt=""
aria-hidden="true"
class="wrn-cta-section__background-image"
/>
data-wrn-owner="CTASection" data-wrn-part="backgroundImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"/>
{/if}
<div class="wrn-cta-section__glow wrn-cta-section__glow--one" aria-hidden="true"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--two" aria-hidden="true"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--one" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--two" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></div>
<div class="wrn-cta-section__layout">
<div class="wrn-cta-section__content">
<div class="wrn-cta-section__layout" data-wrn-owner="CTASection" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<div class="wrn-cta-section__content" data-wrn-owner="CTASection" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if icon}
<div class="wrn-cta-section__icon" aria-hidden="true">
<div class="wrn-cta-section__icon" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<span class='{icon}'></span>
</div>
{/if}
{#if eyebrow}
<p class="wrn-cta-section__eyebrow">{eyebrow}</p>
<p class="wrn-cta-section__eyebrow" data-wrn-owner="CTASection" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{eyebrow}</p>
{/if}
<h2 class="wrn-cta-section__title">{title}</h2>
<h2 class="wrn-cta-section__title" data-wrn-owner="CTASection" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{title}</h2>
{#if description}
<p class="wrn-cta-section__description">{description}</p>
<p class="wrn-cta-section__description" data-wrn-owner="CTASection" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{description}</p>
{/if}
<slot></slot>
{#if primaryLabel || secondaryLabel}
<div class="wrn-cta-section__actions">
<div class="wrn-cta-section__actions" data-wrn-owner="CTASection" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if primaryLabel}
<a href='{primaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--primary">
<a href='{primaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--primary" data-wrn-owner="CTASection" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if primaryIcon}
<span class='wrn-cta-section__action-icon {primaryIcon}' aria-hidden="true"></span>
<span class='wrn-cta-section__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<span>{primaryLabel}</span>
</a>
{/if}
{#if secondaryLabel}
<a href='{secondaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--secondary">
<a href='{secondaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--secondary" data-wrn-owner="CTASection" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if secondaryIcon}
<span class='wrn-cta-section__action-icon {secondaryIcon}' aria-hidden="true"></span>
<span class='wrn-cta-section__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<span>{secondaryLabel}</span>
</a>
@@ -106,49 +106,49 @@ component CTASection {
<slot name="actions"></slot>
</div>
{:else}
<div class="wrn-cta-section__actions wrn-cta-section__actions--slot">
<div class="wrn-cta-section__actions wrn-cta-section__actions--slot" data-wrn-owner="CTASection" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="actions"></slot>
</div>
{/if}
</div>
<div class="wrn-cta-section__visual-column">
<div class="wrn-cta-section__visual-column" data-wrn-owner="CTASection" data-wrn-part="visualColumn" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="visual"></slot>
{#if visualImage || visualIcon || visualTitle || visualDescription || visualItems.length > 0}
<div class="wrn-cta-section__visual">
<div class="wrn-cta-section__visual" data-wrn-owner="CTASection" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualImage}
<div class="wrn-cta-section__visual-media">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-cta-section__visual-image" />
<div class="wrn-cta-section__visual-media" data-wrn-owner="CTASection" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-cta-section__visual-image" data-wrn-owner="CTASection" data-wrn-part="visualImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"/>
</div>
{/if}
{#if visualIcon || visualTitle || visualDescription}
<div class="wrn-cta-section__visual-header">
<div class="wrn-cta-section__visual-header" data-wrn-owner="CTASection" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualIcon}
<div class="wrn-cta-section__visual-icon" aria-hidden="true">
<div class="wrn-cta-section__visual-icon" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<span class='{visualIcon}'></span>
</div>
{/if}
<div class="wrn-cta-section__visual-copy">
<div class="wrn-cta-section__visual-copy" data-wrn-owner="CTASection" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualTitle}
<h3 class="wrn-cta-section__visual-title">{visualTitle}</h3>
<h3 class="wrn-cta-section__visual-title" data-wrn-owner="CTASection" data-wrn-part="visualTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{visualTitle}</h3>
{/if}
{#if visualDescription}
<p class="wrn-cta-section__visual-description">{visualDescription}</p>
<p class="wrn-cta-section__visual-description" data-wrn-owner="CTASection" data-wrn-part="visualDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{visualDescription}</p>
{/if}
</div>
</div>
{/if}
{#if visualItems.length > 0}
<div class="wrn-cta-section__visual-list">
<div class="wrn-cta-section__visual-list" data-wrn-owner="CTASection" data-wrn-part="visualList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#each visualItems as item}
<div class="wrn-cta-section__visual-item">
<div class="wrn-cta-section__visual-item" data-wrn-owner="CTASection" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if item.icon}
<span class='wrn-cta-section__visual-item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-cta-section__visual-item-icon {item.icon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<div>
<strong>{item.label || item.title}</strong>
@@ -165,7 +165,7 @@ component CTASection {
</div>
</div>
<div class="wrn-cta-section__footer">
<div class="wrn-cta-section__footer" data-wrn-owner="CTASection" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="footer"></slot>
</div>
</div>