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='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">
          {#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-text-muted, var(--wrn-color-muted));
          line-height: 1.6;
        }
  }
}