Product Requirements Document

Divider SDC — 3 Varianten

approved P2503-159 Parent: P2503-82 Theme
TL;DR — Neue SDC byte_theme:divider mit drei Varianten nach SOLCOM Design System: headline-left und headline-center als Image-Banner mit Gradient-Overlay und Headline-Slot, accent-line als gepunktete Lime-Linie. Ein Canvas-Block-Type mit Variant-Dropdown. Grounding: Figma-Frame 61877:9479, ADR-0003.

Problem Statement

Content-Editoren haben in Drupal Canvas aktuell keine Möglichkeit, Seitenabschnitte visuell zu trennen. Das SOLCOM Design System definiert drei Divider-Ausprägungen für section-trennende Visuals (Figma-Frame 61877:9479), die aber im Theme nicht implementiert sind.

Ohne Divider-Komponente behelfen sich Editoren mit ungünstigen Workarounds (leere Spacer-Blöcke, missbräuchliche Hero-Komponenten), die weder dem Figma-Design entsprechen noch wartbar sind. Das führt zu visueller Inkonsistenz auf Seiten, die mehrere thematische Abschnitte bündeln.

Solution

Greenfield-Build einer neuen SDC byte_theme:divider unter web/themes/custom/byte_theme/components/divider/ mit drei Varianten über html_cva():

Die Komponente wird als ein einziger Canvas-Block-Type registriert. Content-Editoren wählen die Variante über ein Dropdown-Prop. Der neue Brand-Token --brand-dark-blue-75 wird in theme.brand.css ergänzt.

i
Der Headline-Slot nimmt byte_theme:heading auf — Content-Editoren haben damit volle Kontrolle über Heading-Level und Textgröße über das bestehende Heading-SDC. Kein neuer String-Prop für die Headline.

User Stories

  1. Als Content-Editor möchte ich in Drupal Canvas einen Divider-Block einfügen können, damit ich Seiteninhalte visuell in Abschnitte gliedern kann.
  2. Als Content-Editor möchte ich zwischen drei Divider-Varianten wählen können (Headline links, Headline zentral, Akzentlinie), damit ich die passende Ausprägung je nach Seitenkontext wählen kann.
  3. Als Content-Editor möchte ich bei Banner-Varianten ein eigenes Bild hochladen oder aus der Media-Library auswählen können, damit jede Seite ein passendes Foto zeigen kann.
  4. Als Content-Editor möchte ich bei Banner-Varianten eine Headline über das Standard-Heading-SDC einfügen können, damit ich Heading-Level und Textgröße kontrollieren kann.
  5. Als Content-Editor möchte ich die accent-line-Variante ohne Bild und ohne Headline nutzen können, damit ich eine schlichte Trennung zwischen Abschnitten setzen kann.
  6. Als Site-Builder möchte ich, dass die Akzentlinie die Brand-Lime-Farbe verwendet, damit die Komponente immer Brand-konform ist ohne manuelle Farb-Konfiguration.
  7. Als Site-Builder möchte ich, dass der Overlay-Gradient der Banner-Varianten aus einem benannten Brand-Token kommt, damit Farb-Updates zentral in theme.brand.css wirksam werden.
  8. Als Entwickler möchte ich die drei Varianten über html_cva() implementieren, damit die Variantenlogik wartbar und testbar bleibt.
  9. Als Entwickler möchte ich Component-Tests für alle drei Varianten haben, damit Regressionen bei Theme-Updates frühzeitig erkannt werden.
  10. Als Entwickler möchte ich den Mapping-Eintrag in docs/design/MAPPING.html auf matched setzen, damit der Figma-SDC-Parity-Stand korrekt ist.
  11. Als QA-Engineer möchte ich die Komponente in einem laufenden DDEV-Canvas-Editor testen können, damit ich alle drei Varianten browser-seitig verifizieren kann.
  12. Als Accessibility-Prüfer möchte ich sicherstellen, dass das Hintergrundbild der Banner-Varianten ein leeres Alt-Attribut trägt (dekorativ), damit Screenreader das Bild ignorieren.

Implementation Decisions

Module / Dateien

Schema-Entscheidungen

Prop/SlotTypWert
variantstring enumheadline-left | headline-center | accent-line (Default: accent-line)
mediaCanvas-Image-Ref$ref: json-schema-definitions://canvas.module/image — Twig-seitig ignoriert bei accent-line
headline_slotSlotNimmt byte_theme:heading auf — Twig-seitig ignoriert bei accent-line

Token-Ergänzung

Neuer Token --brand-dark-blue-75: color-mix(in oklab, var(--brand-dark-blue) 75%, transparent) in theme.brand.css. Begründung: ADR-0003 verbietet hardcoded Hex-Werte; das Figma spezifiziert rgba(0,31,70,0.75) = brand-dark-blue @75%. Der Token ist wiederverwendbar an anderen Overlay-Stellen.

Akzentlinie

Implementierung als <hr>-Element mit border-top: 2px dotted var(--brand-lime). Die Figma-Spec zeigt einen gepunkteten Vektor — CSS dotted reproduziert das exakt ohne Asset-Abhängigkeit. Das <hr>-Element ist semantisch korrekt für eine inhaltliche Trennung.

Canvas-Registrierung

Ein einziger Canvas-Block-Type divider mit variant-Prop-Dropdown. Kein Split in drei separate Blöcke. Entspricht dem heading-Muster im Theme.

Bild-Prop (Banner-Varianten)

Prop media mit $ref: json-schema-definitions://canvas.module/image — identisches Muster wie hero-billboard. Canvas rendert ein Standard-Bildauswahl-Feld für Content-Editoren. Twig ignoriert media bei Variante accent-line.

Headline (Banner-Varianten)

Slot headline_slot nimmt byte_theme:heading auf. Content-Editoren steuern Heading-Level, Textgröße und Farbe über das bestehende Heading-SDC. Kein eigener String-Prop für die Headline-Typo, da das Figma keine variablen Heading-Parameter vorsieht — die Slot-Lösung gibt aber maximale Freiheit für zukünftige Inhalte.

CVA-Varianten-Logik

Implementierung über html_cva() nach dem etablierten Byte-Theme-Muster (wie button, badge, etc.). Die Basisklassen übernehmen das Layout; Varianten-Klassen steuern Alignment und Sichtbarkeit von Overlay + Headline-Container.

Testing Decisions

Ein guter Test prüft ausschließlich externes Verhalten (gerendertes HTML), nicht Implementierungsdetails (CVA-Klassenlogik intern). Prior Art: Component-Tests unter web/themes/custom/byte_theme/tests/ für bestehende SDCs.

Out of Scope

Further Notes