304 lines
8.5 KiB
Plaintext
304 lines
8.5 KiB
Plaintext
import FeatureCard from "./FeatureCard.wrn"
|
|
|
|
component FeatureGrid {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
items: unknown[] = []
|
|
columns: number = 3
|
|
tabletColumns: number = 2
|
|
mobileColumns: number = 1
|
|
gap: string = "md"
|
|
minItemWidth: string = ""
|
|
equalHeight: boolean = true
|
|
align: string = "stretch"
|
|
maxWidth: string = "full"
|
|
variant: string = "default"
|
|
label: string = "Features"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
{...attrs}
|
|
data-ui-component="FeatureGrid"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-columns='{columns}'
|
|
data-tablet-columns='{tabletColumns}'
|
|
data-mobile-columns='{mobileColumns}'
|
|
data-gap='{gap}'
|
|
data-autofit='{minItemWidth !== "" ? "true" : "false"}'
|
|
data-equal-height='{equalHeight ? "true" : "false"}'
|
|
data-align='{align}'
|
|
data-max-width='{maxWidth}'
|
|
data-variant='{variant}'
|
|
class='wrn-feature-grid wrn-component--color-{color} wrn-component--size-{size} {class}'
|
|
aria-label='{label}'
|
|
style='--wrn-feature-grid-columns: {columns}; --wrn-feature-grid-tablet-columns: {tabletColumns}; --wrn-feature-grid-mobile-columns: {mobileColumns}; --wrn-feature-grid-min-item-width: {minItemWidth || "17rem"};'
|
|
>
|
|
<div class="wrn-feature-grid__inner">
|
|
<div class="wrn-feature-grid__grid" role="list">
|
|
{#if items.length > 0}
|
|
{#each items as item, itemIndex}
|
|
<FeatureCard
|
|
icon='{item.icon || ""}'
|
|
iconStyle='{item.iconStyle || "soft"}'
|
|
iconSize='{item.iconSize || "default"}'
|
|
eyebrow='{item.eyebrow || ""}'
|
|
title='{item.title || item.label || "Feature"}'
|
|
description='{item.description || ""}'
|
|
image='{item.image || item.imageSrc || ""}'
|
|
imageAlt='{item.imageAlt || item.title || item.label || ""}'
|
|
imagePosition='{item.imagePosition || "top"}'
|
|
imageAspect='{item.imageAspect || "wide"}'
|
|
href='{item.href || ""}'
|
|
target='{item.target || ""}'
|
|
rel='{item.rel || ""}'
|
|
external='{item.external || false}'
|
|
actionLabel='{item.actionLabel || "Learn more"}'
|
|
actionIcon='{item.actionIcon || ""}'
|
|
badge='{item.badge || ""}'
|
|
badgeColor='{item.badgeColor || item.color || "primary"}'
|
|
size='{item.size || "default"}'
|
|
color='{item.color || "primary"}'
|
|
variant='{item.variant || "default"}'
|
|
hover='{item.hover || "lift"}'
|
|
align='{item.align || "left"}'
|
|
disabled='{item.disabled || false}'
|
|
stretchedLink='{item.stretchedLink !== false}'
|
|
showArrow='{item.showArrow !== false}'
|
|
class='{item.class || ""}'
|
|
/>
|
|
{/each}
|
|
{/if}
|
|
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
style {
|
|
.wrn-feature-grid {
|
|
--feature-grid-gap: 1.25rem;
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 0;
|
|
color: var(--wrn-color-text);
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="none"] {
|
|
--feature-grid-gap: 0;
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="xs"] {
|
|
--feature-grid-gap: 0.5rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="sm"] {
|
|
--feature-grid-gap: 0.75rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="md"] {
|
|
--feature-grid-gap: 1.25rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="lg"] {
|
|
--feature-grid-gap: 1.75rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-gap="xl"] {
|
|
--feature-grid-gap: 2.25rem;
|
|
}
|
|
|
|
.wrn-feature-grid__inner {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="compact"] .wrn-feature-grid__inner {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="lg"] .wrn-feature-grid__inner {
|
|
max-width: 72rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="xl"] .wrn-feature-grid__inner {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="wide"] .wrn-feature-grid__inner {
|
|
max-width: 90rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="2xl"] .wrn-feature-grid__inner {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-max-width="full"] .wrn-feature-grid__inner {
|
|
max-width: none;
|
|
}
|
|
|
|
.wrn-feature-grid__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
var(--wrn-feature-grid-mobile-columns),
|
|
minmax(0, 1fr)
|
|
);
|
|
align-items: stretch;
|
|
gap: var(--feature-grid-gap);
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-feature-grid[data-align="start"] .wrn-feature-grid__grid {
|
|
align-items: start;
|
|
}
|
|
|
|
.wrn-feature-grid[data-align="center"] .wrn-feature-grid__grid {
|
|
align-items: center;
|
|
}
|
|
|
|
.wrn-feature-grid[data-align="end"] .wrn-feature-grid__grid {
|
|
align-items: end;
|
|
}
|
|
|
|
.wrn-feature-grid__grid > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.wrn-feature-grid[data-equal-height="true"] .wrn-feature-grid__grid > * {
|
|
height: 100%;
|
|
}
|
|
|
|
.wrn-feature-grid[data-variant="panel"] .wrn-feature-grid__inner {
|
|
padding: 1rem;
|
|
background: var(--wrn-color-surface-raised);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.wrn-feature-grid[data-variant="soft"] .wrn-feature-grid__inner {
|
|
padding: 1rem;
|
|
background: color-mix(in srgb, var(--wrn-color-primary) 5%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 14%, var(--wrn-color-border));
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 40rem) {
|
|
.wrn-feature-grid__grid {
|
|
grid-template-columns: repeat(
|
|
var(--wrn-feature-grid-tablet-columns),
|
|
minmax(0, 1fr)
|
|
);
|
|
}
|
|
|
|
.wrn-feature-grid[data-autofit="true"] .wrn-feature-grid__grid {
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(min(100%, var(--wrn-feature-grid-min-item-width)), 1fr)
|
|
);
|
|
}
|
|
|
|
.wrn-feature-grid[data-variant="panel"] .wrn-feature-grid__inner,
|
|
.wrn-feature-grid[data-variant="soft"] .wrn-feature-grid__inner {
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 64rem) {
|
|
.wrn-feature-grid__grid {
|
|
grid-template-columns: repeat(
|
|
var(--wrn-feature-grid-columns),
|
|
minmax(0, 1fr)
|
|
);
|
|
}
|
|
|
|
.wrn-feature-grid[data-autofit="true"] .wrn-feature-grid__grid {
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(min(100%, var(--wrn-feature-grid-min-item-width)), 1fr)
|
|
);
|
|
}
|
|
|
|
.wrn-feature-grid[data-variant="panel"] .wrn-feature-grid__inner,
|
|
.wrn-feature-grid[data-variant="soft"] .wrn-feature-grid__inner {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Shared component foundation. */
|
|
|
|
.wrn-component {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
--wrn-component-scale: 1;
|
|
margin: 0;
|
|
color: var(--wrn-color-text);
|
|
font-family: var(--wrn-font-sans, inherit);
|
|
}
|
|
|
|
.wrn-component--color-primary {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-component--color-secondary {
|
|
--wrn-component-color: var(--wrn-color-secondary);
|
|
}
|
|
|
|
.wrn-component--color-success {
|
|
--wrn-component-color: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-component--color-warning {
|
|
--wrn-component-color: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-component--color-danger {
|
|
--wrn-component-color: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-component--color-info {
|
|
--wrn-component-color: var(--wrn-color-info);
|
|
}
|
|
|
|
.wrn-component--size-xs {
|
|
--wrn-component-scale: 0.78;
|
|
}
|
|
|
|
.wrn-component--size-sm {
|
|
--wrn-component-scale: 0.88;
|
|
}
|
|
|
|
.wrn-component--size-default,
|
|
.wrn-component--size-md {
|
|
--wrn-component-scale: 1;
|
|
}
|
|
|
|
.wrn-component--size-lg {
|
|
--wrn-component-scale: 1.14;
|
|
}
|
|
|
|
.wrn-component--size-xl {
|
|
--wrn-component-scale: 1.28;
|
|
}
|
|
|
|
.wrn-component:not(.wrn-btn) {
|
|
font-size: calc(1em * var(--wrn-component-scale));
|
|
}
|
|
|
|
.wrn-component :is(a, button, input, select, textarea):focus-visible {
|
|
outline-color: var(--wrn-component-color);
|
|
}
|
|
|
|
.wrn-component p {
|
|
margin: 0;
|
|
color: var(--wrn-color-muted);
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|