Preview a section's structural edge cases

Preview a section's structural edge cases.

Goal

Preview a section’s structural edge cases.

The delta

Add entries under states in fixtures.ts — each one overrides part of base, the same pattern the starter’s left and long-blurb states use. A states entry is for a DESIGNED case, not raw coverage: nullability and empty-slot coverage (every optional slot rendered empty) is derived automatically from schema.ts, so a fixture state is for a case the section renders differently — a content-length branch, an option branch, or several overrides combined.

// fixtures.ts — a content-length case and an option-branch case
const fixtures: FixtureModule = {
  base: {
    slots: {
      headline: "101 Queensway, Jamaica Plain, MA 02130",
      summary: "A 12-unit mansard Victorian moments from the Emerald Necklace.",
    },
    options: { align: "center" },
  },
  states: {
    // Content-length branch: exercises a long value's wrap/expand behavior.
    "long-summary": {
      slots: {
        summary:
          "A 12-unit mansard Victorian moments from the Emerald Necklace, with a " +
          "terrazzo lobby, an on-site gym, quartz kitchens throughout, and a " +
          "top-floor penthouse with a private rooftop terrace and skyline views.",
      },
    },
    // Option branch: exercises the layout under the other enum value.
    left: { options: { align: "left" } },
  },
};

Each states key names a state; its value overrides slots and/or options on top of base — omit either key to inherit base’s value unchanged. Each state is a selectable fixture in the dev preview, so every one you add is there to render and review alongside base.

Swap the whole scenario

A state can also be designed to look different against a sparser property — fewer units, no logo, no video — rather than a content-length or option branch. Source that kind of state from a different scenario, not from hand-picked overrides:

// fixtures.ts — a `sparse` state sourced from a different scenario
import { scenarios } from "@homepages/template-kit/fixtures";

const luxury = scenarios.luxuryMultiUnit;
const sparse = scenarios.sparseSingleFamily;

const fixtures: FixtureModule = {
  base: {
    slots: {
      headline: luxury.facts.address.display,
      summary: "A 12-unit mansard Victorian moments from the Emerald Necklace.",
    },
    options: { align: "center" },
  },
  states: {
    sparse: {
      slots: {
        headline: sparse.facts.address.display,
        summary:
          "A classic center-hall colonial with an updated kitchen and original " +
          "hardwood floors throughout.",
      },
    },
  },
};

Fill every slot in a scenario-swapped state the same way you filled base — by the slot’s fill-spec source, never with a placeholder. See the fill-by-source rule and Pick a scenario for the picker and helper cheat-sheet.

Commands

None — this is a pure content edit. No CLI command beyond the author loop below.

Verify

Verify with the author loop.