WRNexusJS/packages/ui/components/FeatureGrid.wrn

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='wire-feature-grid wire-component--color-{color} wire-component--size-{size} {class}'
      aria-label='{label}'
      style='--wire-feature-grid-columns: {columns}; --wire-feature-grid-tablet-columns: {tabletColumns}; --wire-feature-grid-mobile-columns: {mobileColumns}; --wire-feature-grid-min-item-width: {minItemWidth || "17rem"};'
    >
      <div class="wire-feature-grid__inner">
        <div class="wire-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>
    <ComponentBaseStyles hidden />
  }

  style {
    .wire-feature-grid {
      --feature-grid-gap: 1.25rem;

      position: relative;
      width: 100%;
      min-width: 0;
      color: var(--wire-color-text);
    }

    .wire-feature-grid[data-gap="none"] {
      --feature-grid-gap: 0;
    }

    .wire-feature-grid[data-gap="xs"] {
      --feature-grid-gap: 0.5rem;
    }

    .wire-feature-grid[data-gap="sm"] {
      --feature-grid-gap: 0.75rem;
    }

    .wire-feature-grid[data-gap="md"] {
      --feature-grid-gap: 1.25rem;
    }

    .wire-feature-grid[data-gap="lg"] {
      --feature-grid-gap: 1.75rem;
    }

    .wire-feature-grid[data-gap="xl"] {
      --feature-grid-gap: 2.25rem;
    }

    .wire-feature-grid__inner {
      width: 100%;
      margin-inline: auto;
    }

    .wire-feature-grid[data-max-width="compact"] .wire-feature-grid__inner {
      max-width: 64rem;
    }

    .wire-feature-grid[data-max-width="lg"] .wire-feature-grid__inner {
      max-width: 72rem;
    }

    .wire-feature-grid[data-max-width="xl"] .wire-feature-grid__inner {
      max-width: 80rem;
    }

    .wire-feature-grid[data-max-width="wide"] .wire-feature-grid__inner {
      max-width: 90rem;
    }

    .wire-feature-grid[data-max-width="2xl"] .wire-feature-grid__inner {
      max-width: 96rem;
    }

    .wire-feature-grid[data-max-width="full"] .wire-feature-grid__inner {
      max-width: none;
    }

    .wire-feature-grid__grid {
      display: grid;
      grid-template-columns: repeat(
        var(--wire-feature-grid-mobile-columns),
        minmax(0, 1fr)
      );
      align-items: stretch;
      gap: var(--feature-grid-gap);
      width: 100%;
      min-width: 0;
    }

    .wire-feature-grid[data-align="start"] .wire-feature-grid__grid {
      align-items: start;
    }

    .wire-feature-grid[data-align="center"] .wire-feature-grid__grid {
      align-items: center;
    }

    .wire-feature-grid[data-align="end"] .wire-feature-grid__grid {
      align-items: end;
    }

    .wire-feature-grid__grid > * {
      min-width: 0;
      max-width: 100%;
    }

    .wire-feature-grid[data-equal-height="true"] .wire-feature-grid__grid > * {
      height: 100%;
    }

    .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner {
      padding: 1rem;
      background: var(--wire-color-surface-raised);
      border: 1px solid var(--wire-color-border);
      border-radius: 1.5rem;
    }

    .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
      padding: 1rem;
      background: color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
      border: 1px solid color-mix(in srgb, var(--wire-color-primary) 14%, var(--wire-color-border));
      border-radius: 1.5rem;
    }

    @media (min-width: 40rem) {
      .wire-feature-grid__grid {
        grid-template-columns: repeat(
          var(--wire-feature-grid-tablet-columns),
          minmax(0, 1fr)
        );
      }

      .wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
        grid-template-columns: repeat(
          auto-fit,
          minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
        );
      }

      .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
      .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
        padding: 1.25rem;
      }
    }

    @media (min-width: 64rem) {
      .wire-feature-grid__grid {
        grid-template-columns: repeat(
          var(--wire-feature-grid-columns),
          minmax(0, 1fr)
        );
      }

      .wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
        grid-template-columns: repeat(
          auto-fit,
          minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
        );
      }

      .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
      .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
        padding: 1.5rem;
      }
    }
  }
}
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
 import FeatureCard from "./FeatureCard.wrn"