ferst-core 0.7.7 → 0.7.9

package/components/recipes/FeatureCards.astro

@@ -1,112 +1,115 @@
----
-/**
- * FeatureCards — a Level-2 recipe: an optional section header over a responsive
- * grid of cards, each with an optional icon, a title, text, and an optional
- * link. Composes the Card, Icon, Heading and Button primitives.
- */
-import Heading from '../blocks/Heading.astro';
-import Card from '../Card.astro';
-import Icon from '../Icon.astro';
-import Button from '../Button.astro';
-import { isIconKey } from '../../lib/icons';
-
-import { inlineMarkdown } from '../../lib/inline-markdown';
-interface Props {
-  title?: string;
-  intro?: string;
-  columns?: 2 | 3 | 4;
-  cards?: { icon?: string; title: string; text?: string; href?: string }[];
-}
-const { title, intro, columns = 3, cards = [] } = Astro.props;
-// Never reserve more columns than there are cards (a lone card in a 3-col grid
-// would strand two empty cells); `data-single` centres a solitary card.
-const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
----
-
-<section class="b-feature-cards">
-  {(title || intro) && (
-    <div class="b-feature-cards__head">
-      {title && <Heading text={title} level={2} align="center" />}
-      {intro && <p class="b-feature-cards__intro" set:html={inlineMarkdown(intro)} />}
-    </div>
-  )}
-  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
-    {cards.map((card) => (
-      <Card>
-        {card.icon && isIconKey(card.icon) && (
-          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
-        )}
-        <h3 class="b-feature-cards__title">{card.title}</h3>
-        {card.text && <p class="b-feature-cards__text" set:html={inlineMarkdown(card.text)} />}
-        {card.href && (
-          <span class="b-feature-cards__cta">
-            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
-          </span>
-        )}
-      </Card>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-feature-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-feature-cards__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-feature-cards__intro {
-    margin: 0;
-    color: var(--muted);
-    font-size: 1.0625rem;
-    line-height: 1.6;
-  }
-  .b-feature-cards__grid {
-    display: grid;
-    grid-template-columns: 1fr; /* mobile-first */
-    gap: 1.5rem;
-  }
-  @media (min-width: 48em) {
-    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
-    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
-  }
-  /* A solitary card is a centred feature, not a full-width slab. */
-  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
-  }
-  @media (min-width: 64em) {
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
-  }
-  .b-feature-cards__icon {
-    color: var(--gold);
-    margin-bottom: 0.5rem;
-    display: inline-flex;
-  }
-  .b-feature-cards__title {
-    margin: 0 0 0.5rem;
-    font-size: 1.125rem;
-    color: var(--fg);
-  }
-  .b-feature-cards__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
-     of how much text each card has. Cards are equal height already (grid items
-     stretch), and Card is a flex column — margin-top:auto does the rest. */
-  .b-feature-cards__cta {
-    margin-top: auto;
-    padding-top: 1rem;
-  }
-</style>
+---
+/**
+ * FeatureCards — a Level-2 recipe: an optional section header over a responsive
+ * grid of cards, each with an optional icon, a title, text, and an optional
+ * link. Composes the Card, Icon, Heading and Button primitives.
+ */
+import Heading from '../blocks/Heading.astro';
+import Card from '../Card.astro';
+import Icon from '../Icon.astro';
+import Button from '../Button.astro';
+import { isIconKey } from '../../lib/icons';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3 | 4;
+  cards?: { icon?: string; title: string; text?: string; href?: string }[];
+}
+const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
+// Never reserve more columns than there are cards (a lone card in a 3-col grid
+// would strand two empty cells); `data-single` centres a solitary card.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
+---
+
+<section class="b-feature-cards">
+  {(title || intro) && (
+    <div class="b-feature-cards__head" data-recipe-head data-content-align={headAlign}>
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-feature-cards__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => (
+      <Card>
+        {card.icon && isIconKey(card.icon) && (
+          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
+        )}
+        <h3 class="b-feature-cards__title">{card.title}</h3>
+        {card.text && <p class="b-feature-cards__text" set:html={inlineMarkdown(card.text)} />}
+        {card.href && (
+          <span class="b-feature-cards__cta">
+            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
+          </span>
+        )}
+      </Card>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-feature-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-feature-cards__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-feature-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-feature-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr; /* mobile-first */
+    gap: 1.5rem;
+  }
+  @media (min-width: 48em) {
+    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
+  }
+  @media (min-width: 64em) {
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-feature-cards__icon {
+    color: var(--gold);
+    margin-bottom: 0.5rem;
+    display: inline-flex;
+  }
+  .b-feature-cards__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    color: var(--fg);
+  }
+  .b-feature-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
+     of how much text each card has. Cards are equal height already (grid items
+     stretch), and Card is a flex column — margin-top:auto does the rest. */
+  .b-feature-cards__cta {
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+</style>