P2503 · Sub-Task · gehört zu F-20 / P2503-82

Divider SDC — 3 Varianten

READY-FOR-DEV P2503-159 Figma Frame → Erstellt: 2026-05-18

User Story

Als Content-Editor möchte ich über Drupal Canvas section-trennende Divider-Elemente einsetzen können, damit ich Seiteninhalte visuell gliedern kann — in drei Varianten: Banner mit linksbündiger Headline, Banner mit zentrierter Headline und schmale Akzentlinie.

Figma-Frame

Section-Node-ID: 61877:9479 · Datei CHHDfbpX8Ys2LBiGs5HVK0 · Frame-Gruppe Divider with text (61447:26186).

Drei Varianten (Sub-Nodes)

Figma-NameNode-IDCVA-VariantBeschreibung
text align=center 61447:26187 headline-center 180px Banner, Hintergrundbild, Gradient-Overlay, Montserrat ExtraBold 40px uppercase, weiß, zentriert
text align=Left 61447:26209 headline-left Identisch zu center, Headline linksbündig
text align=Line 61447:26212 accent-line 128px Container, gepunktete Lime-Linie (kein Bild, keine Headline)

Architektur-Entscheidungen (Grilling 2026-05-18)

ThemaEntscheidungBegründung
Bildquelle Banner media-Prop mit $ref: json-schema-definitions://canvas.module/image Folgt hero-billboard-Muster; Content-Editoren wählen Bild je Seite. Twig ignoriert media bei Variante accent-line.
Overlay-Farbe Neuer Token --brand-dark-blue-75 in theme.brand.css: color-mix(in oklab, var(--brand-dark-blue) 75%, transparent) ADR-0003 verbietet hardcoded Hex; Figma nutzt rgba(0,31,70,0.75) = brand-dark-blue @75%. Token ist wiederverwendbar.
Canvas-Registrierung Ein Block-Type divider mit variant-Prop-Dropdown Weniger Registrierungsoverhead als 3 separate Blöcke; CVA-Logik zentral; entspricht heading-Muster.
Headline Slot headline_slot für byte_theme:heading Erlaubt Content-Editoren volle Heading-Kontrolle (Level, Größe) über das bestehende Heading-SDC. Kein neuer String-Prop nötig.
Akzentlinie CSS: border-top: 2px dotted var(--brand-lime) auf <hr> Pixel-genaue Reproduktion des Figma-Musters (gepunktete Linie), keine Asset-Abhängigkeit, skaliert beliebig, vollständig token-basiert.

Drupal-SDC

Kein SDC im Code — Greenfield-Build. Im MAPPING als gap geführt (Frame 61877:9479 noch nicht verankert).

Dateien

  • web/themes/custom/byte_theme/components/divider/divider.component.yml
  • web/themes/custom/byte_theme/components/divider/divider.twig
  • web/themes/custom/byte_theme/components/divider/divider.tailwind.css

Schema-Kern

  • variant: enum [headline-left, headline-center, accent-line], Default accent-line
  • media: $ref: json-schema-definitions://canvas.module/image — nur bei Banner-Varianten sichtbar
  • Slot headline_slot: nimmt byte_theme:heading auf — nur bei Banner-Varianten sichtbar

Token-Ergänzung

Neuer Token in web/themes/custom/byte_theme/src/theme.brand.css:
--brand-dark-blue-75: color-mix(in oklab, var(--brand-dark-blue) 75%, transparent);

Akzeptanzkriterien

  1. SDC unter web/themes/custom/byte_theme/components/divider/ angelegt (divider.component.yml, divider.twig, divider.tailwind.css).
  2. Drei Varianten via html_cva() implementiert: headline-left, headline-center, accent-line.
  3. Schema: Prop variant (Enum, Default accent-line), media-Prop (Canvas-Image-Ref), Slot headline_slot.
  4. Akzentlinie nutzt var(--brand-lime) — kein hardcoded Hex, keine oklch()-Literale (ADR-0003).
  5. Banner-Varianten haben Gradient-Overlay mit neuem Token var(--brand-dark-blue-75).
  6. Headline-Typografie via Brand-Token (Montserrat ExtraBold) — kein harter font-family-String.
  7. Kernel-/Component-Test rendert alle drei Varianten ohne Fehler (Asserts: Wrapper-Klasse, Image-URL/Alt bei Banner-Varianten, kein img-Tag bei accent-line).
  8. docs/design/MAPPING.html: Frame 61877:9479 ↔ byte_theme/divider, Status matched.
  9. Komponente als Canvas-Block-Type registriert (ein Block, Variant-Dropdown).
  10. npm run build im Theme-Root läuft fehlerfrei.

QA-Plan

AK-#URLAktionErwartet
AK-1–3, AK-9 https://solcom.ddev.site/node/add (Canvas-Seite) Block-Bibliothek öffnen, „Divider" suchen, Block einfügen Block erscheint; Variant-Dropdown zeigt 3 Optionen (headline-left, headline-center, accent-line)
AK-2a, AK-4, AK-5 Canvas-Seite mit accent-line Block speichern, Seite laden Gepunktete Lime-Linie sichtbar; kein Bild, kein Headline-Feld gerendert
AK-2b, AK-5, AK-6 Canvas-Seite mit headline-left Bild + Heading-Slot befüllen, speichern, Seite laden Banner mit Hintergrundbild, linksbündige Headline, dunkler Gradient-Overlay sichtbar
AK-2c, AK-5, AK-6 Canvas-Seite mit headline-center Bild + Heading-Slot befüllen, speichern, Seite laden Banner mit zentrierter Headline
AK-4 DevTools → Computed Styles <hr> der accent-line inspizieren border-color resolved zu #bedc00; kein Hex-Literal im generierten CSS
AK-7 Terminal ddev drush test:run --filter=Divider Alle 3 Varianten-Tests grün
AK-10 Terminal (Theme-Root) npm run build Exit 0, keine Fehler oder Warnungen

Eltern-Story

F-20 — Drupal Theme & SOLCOM Corporate Design (P2503-82)