diff --git a/src/components/home/Kundenportal.tsx b/src/components/home/Kundenportal.tsx index e388ac2..2907369 100644 --- a/src/components/home/Kundenportal.tsx +++ b/src/components/home/Kundenportal.tsx @@ -55,10 +55,8 @@ type DemoArt = "termin" | "heatmap" | "pinnwand"; type Funktion = { id: string; titel: string; - /** Ein Satz unter dem Titel (Portal-Stationen); die Funktionen haben stattdessen Stichpunkte. */ + /** Ein Satz unter dem Titel; die drei Funktionen zeigen nur ihren Titel (Wunsch des Inhabers 2026-10-04). */ unterschrift?: string; - /** Stichpunkte unter dem Titel (die drei Funktionen, Wunsch des Inhabers 2026-10-04). */ - stichpunkte?: string[]; /** Bedienhinweis zur Live-Demo, je nachdem, ob es eine Maus gibt (nur Website-Analyse). */ bedienhinweis?: { maus: string; tippen: string }; /** Desktop-Bild; Demo-Stationen zeigen stattdessen die Website, "Als App" hat keines (dort blendet das Fenster aus). */ @@ -119,7 +117,6 @@ const FUNKTIONEN: Funktion[] = [ { id: "terminplaner", titel: "Terminplaner", - stichpunkte: ["Gäste buchen direkt auf Ihrer Website", "Termine und Anfragen im Portal", "Kalender-Abo, z. B. Google Kalender"], demo: "termin", adresse: "salon-schnittstelle.example", beschreibung: @@ -134,7 +131,6 @@ const FUNKTIONEN: Funktion[] = [ { id: "website-analyse", titel: "Website-Analyse", - stichpunkte: ["Heatmap: wohin Besucher klicken", "Aufrufe, Herkunft und Geräte", "Im Wartungs-Abo enthalten"], bedienhinweis: { maus: "Zeigen Sie mit der Maus auf die Seite.", tippen: "Tippen Sie auf eine Stelle der Seite." }, demo: "heatmap", adresse: "boulderhalle-ueberhang.example", @@ -148,7 +144,6 @@ const FUNKTIONEN: Funktion[] = [ { id: "news-pinnwand", titel: "News-Pinnwand", - stichpunkte: ["Text und Foto, vom Handy aus", "Hängt direkt auf Ihrer Website", "Laufzeit je Zettel wählbar"], demo: "pinnwand", adresse: "musterbach.example", beschreibung: "Beispiel-Website einer Ortsgemeinde mit einer Pinnwand, an der ein neuer Zettel aufgehängt wird", @@ -220,35 +215,9 @@ const INERT = (parseInt(version, 10) >= 19 ? { inert: true } : { inert: "" }) as const beispielText = (f: Funktion) => `Erfundenes Beispiel · ${f.adresse}`; -/** - * Unterschrift einer Station: ein Satz oder Stichpunkte. In der Liste steckt sie in einem ); diff --git a/src/components/home/kundenportal.css b/src/components/home/kundenportal.css index 88ff2e9..8617cfd 100644 --- a/src/components/home/kundenportal.css +++ b/src/components/home/kundenportal.css @@ -114,22 +114,6 @@ .kp-eintrag[aria-current="step"] .kp-eintrag__titel { color: var(--fg); } -/* Stichpunkte der drei Funktionen: je Punkt eine Zeile mit kleinem runden Punkt davor */ -.kp-stichpunkt { - position: relative; - display: block; - padding-left: 0.95em; -} -.kp-stichpunkt::before { - content: ""; - position: absolute; - left: 0.15em; - top: calc(0.7em - 2px); - width: 4px; - height: 4px; - border-radius: 50%; - background: currentColor; -} /* kleiner roter Punkt als Marker der aktiven Funktion (hängt im Rand links vom Text) */ .kp-eintrag__punkt { position: absolute; @@ -445,31 +429,6 @@ .kp-karte__text { max-width: 26ch; } -/* Stichpunkte in den Karten: linksbündige Liste, als Block in der Kartenmitte */ -.kp-karte__punkte { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - margin: 0; - padding: 0; - list-style: none; - text-align: left; -} -.kp-karte__punkte li { - position: relative; - padding-left: 0.95em; -} -.kp-karte__punkte li::before { - content: ""; - position: absolute; - left: 0.15em; - top: calc(0.7em - 2px); - width: 4px; - height: 4px; - border-radius: 50%; - background: currentColor; -} .kp-karte__bedienen { margin: 0.35rem 0 0; font-size: var(--fs-small); diff --git a/src/test/relaunch-kundenportal.test.tsx b/src/test/relaunch-kundenportal.test.tsx index 1eb6b30..ecad9d6 100644 --- a/src/test/relaunch-kundenportal.test.tsx +++ b/src/test/relaunch-kundenportal.test.tsx @@ -11,15 +11,15 @@ const WURZEL = `${process.cwd()}/`; const BILDORDNER = join(WURZEL, "public/relaunch/portal"); const TITEL = ["Live-Vorschau", "Fortschritt", "Chat", "Rechnungen", "Terminplaner", "Website-Analyse", "News-Pinnwand", "Als App"]; -/** Ein Satz je Portal-Station, Stichpunkte bei den drei Funktionen (Wunsch des Inhabers 2026-10-04). */ -const UNTERSCHRIFTEN: (string | string[])[] = [ +/** Ein Satz je Portal-Station; die drei Funktionen zeigen nur ihren Titel (Wunsch des Inhabers 2026-10-04). */ +const UNTERSCHRIFTEN: (string | null)[] = [ "Ihre Website, noch während wir daran bauen.", "Was wir zuletzt erledigt haben – in einfachen Sätzen.", "Frage, Foto oder Sprachnachricht direkt ans Team.", "Ansehen, bezahlen, herunterladen.", - ["Gäste buchen direkt auf Ihrer Website", "Termine und Anfragen im Portal", "Kalender-Abo, z. B. Google Kalender"], - ["Heatmap: wohin Besucher klicken", "Aufrufe, Herkunft und Geräte", "Im Wartungs-Abo enthalten"], - ["Text und Foto, vom Handy aus", "Hängt direkt auf Ihrer Website", "Laufzeit je Zettel wählbar"], + null, + null, + null, "Aufs Handy installieren, fertig.", ]; const SCHRITTE = [ @@ -91,10 +91,11 @@ describe("Kundenportal: Text und Reihenfolge", () => { it("Handy: die acht Funktionen stehen in der richtigen Reihenfolge mit ihren Unterschriften", () => { zeigeHandy(); expect(screen.getAllByRole("heading", { level: 3 }).map((h) => h.textContent)).toEqual(TITEL); - for (const text of UNTERSCHRIFTEN.flat()) expect(screen.getByText(text)).toBeInTheDocument(); - // Stichpunkte stehen in den Karten als echte Liste - for (const punkte of UNTERSCHRIFTEN.filter(Array.isArray)) { - expect(screen.getByText(punkte[0]).closest("ul")).toHaveClass("kp-karte__punkte"); + for (const text of UNTERSCHRIFTEN) if (text) expect(screen.getByText(text)).toBeInTheDocument(); + // die drei Funktions-Karten: nur der Titel, kein Satz und keine Stichpunkte + for (const titel of ["Terminplaner", "Website-Analyse", "News-Pinnwand"]) { + const karte = screen.getByRole("heading", { level: 3, name: titel }).closest(".kp-karte")!; + expect(karte.querySelector(".kp-karte__text, ul")).toBeNull(); } // in der Wisch-Reihe gibt es keine Maus: der Bedienhinweis der Analyse sagt "Tippen" expect(screen.getByText("Tippen Sie auf eine Stelle der Seite.")).toBeInTheDocument();