@breathe-ds/ui 0.6.7 → 0.6.8

package/README.md

@@ -162,6 +162,8 @@ files (`public/brand`) in the repositories, split into two components so the
 
 ```tsx
 <Curtain logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
+// once per session: the head script, from its own module (callable in a server layout, 0.6.8)
+// import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
 <Lockup variant="horizontal" size="md" logo={<CreetaSymbol />} wordmark={<CreetaWordmark />} wordmarkRatio={CREETA_LOCKUP.wordmarkPerSymbol} name="creeta" />
 ```
 
@@ -306,6 +308,12 @@ from color, not from extra markup.
   the page-level pause contract (`CARD_VIDEOS_PAUSE_EVENT` / `CARD_VIDEOS_PAUSED_ATTR`).
 - **TestimonialCard**: clip with a play button on the left, quote + author +
   outbound link on the right ("Famílias contam").
+  **Rule (0.6.8): in a grid of testimonials with `panel`, the card is ONLY a quote**
+  — a short excerpt in the person's own words, large, with the drawn quote mark;
+  the whole testimonial (and its video or photo) opens in the panel on click. Pass
+  the `excerpt` the client chose (`excerptMarks={false}` for a context line that is
+  not the person's speech); without one, the card takes the first sentence.
+  Never show the long text clamped on the card.
 - **MapCard**: the Mapa of novo.creeta — a still preview fading into the card,
   the address, "View the map" and the outbound "Directions" link; Google is only
   called after the tap (no consent banner, lighter page). Open, the map fills

package/components/Curtain.tsx

@@ -98,16 +98,11 @@ export function Curtain({ name, tagline, logo, wordmarkRatio, symbolSide = "left
 }
 
 /**
- * Script for the <head> (before paint): marks the curtain as seen in this
- * session, so it does not repeat on navigation or reload. Without it, the
- * curtain shows on every load.
- *   // Next (app/layout):
- *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ * Script for the <head>: moved to `components/curtainHeadScript.ts` (2026-11-05)
+ * so a server layout can call it (this file is "use client"). Kept here for old
+ * imports from client code.
  */
-export function curtainHeadScript(storageKey = "cg-curtain") {
-  const k = JSON.stringify(storageKey);
-  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
-}
+export { curtainHeadScript } from "./curtainHeadScript";
 
 const CURTAIN_CSS = `
 .cg-curtain{

package/components/TestimonialCard.tsx

@@ -79,7 +79,11 @@ type Props = {
    *  or only in the panel — the card stays a clean quote with the avatar. */
   mediaPlacement?: "card" | "panel";
   /** The card shows only this excerpt, large, as a pull quote (the person's own
-   *  words, never rewritten); the whole `quote` goes to the panel. */
+   *  words, never rewritten); the whole `quote` goes to the panel.
+   *  RULE (2026-11-05, Felipe): with `panel`, the card is ONLY a quote — never
+   *  the long text clamped. Pass the excerpt the client chose; without one, the
+   *  card takes the first sentence of a string `quote` (cut at a word, with "…",
+   *  when it runs long). The whole testimonial always opens in the panel. */
   excerpt?: ReactNode;
   /** Quote marks around the excerpt. false for a context line that is not the
    *  person's speech (e.g. the description of a video). Default: true. */
@@ -179,8 +183,21 @@ function TapVideo({ src, youtubeId, poster: posterProp, description, withSound =
 // whole class names, so Tailwind generates them
 const CLAMP: Record<number, string> = { 3: "line-clamp-3", 4: "line-clamp-4", 5: "line-clamp-5", 6: "line-clamp-6", 8: "line-clamp-8" };
 
+/** First sentence of a testimonial, for the card when no excerpt was chosen.
+ *  Long sentences are cut at a word (≤ 140 characters) with "…". */
+export function firstSentence(text: string, max = 140): string {
+  const clean = text.replace(/\s+/g, " ").trim();
+  const m = /^(.+?[.!?])(\s|$)/.exec(clean);
+  const s = m ? m[1] : clean;
+  if (s.length <= max) return s;
+  const cut = s.slice(0, max);
+  return `${cut.slice(0, cut.lastIndexOf(" ")).replace(/[,;:\s]+$/, "")}…`;
+}
+
 export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, authors, link, video, photo, mediaPlacement = "card", role, joiners, panel, excerpt, excerptMarks = true, clampLines, as: Root = "div", labels, className = "" }: Props) {
   const t = { ...EN, ...labels };
+  // with a panel the card is only a quote: the given excerpt, or the first sentence
+  const shownExcerpt = excerpt ?? (panel && typeof quote === "string" ? firstSentence(quote) : undefined);
   const watch = (d: string) => (typeof t.watch === "function" ? t.watch(d) : t.watch.replace("{description}", d));
   const people = authors ?? [{ name: author ?? "", photo: authorPhoto, avatar: authorAvatar }];
   const cardPhoto = mediaPlacement === "card" ? photo : undefined;
@@ -227,7 +244,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
       ) : null}
       <figure className={`flex flex-1 flex-col justify-between gap-5 ${cardVideo || cardPhoto ? "p-5 md:p-7" : "p-6 md:p-8"}`}>
         <div>
-          {excerpt ? (
+          {shownExcerpt ? (
             <blockquote className="m-0">
               {/* the family's drawn mark (same as PullQuote) above the line; the line itself stays clean */}
               {excerptMarks && (
@@ -235,7 +252,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
                   <path d="M0 36V22C0 10.5 6 2.6 18.2 0l2.3 5.2C14.6 7.4 11.4 11 11 16h8.6v20H0Zm27.4 0V22c0-11.5 6-19.4 18.2-22l2.3 5.2C42 7.4 38.8 11 38.4 16H47v20H27.4Z" />
                 </svg>
               )}
-              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{excerpt}</p>
+              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{shownExcerpt}</p>
             </blockquote>
           ) : (
             <blockquote

package/components/curtainHeadScript.ts

@@ -0,0 +1,13 @@
+/**
+ * Script for the <head> (before paint) of the Curtain: marks the curtain as seen
+ * in this session, so it does not repeat on navigation or reload. Without it, the
+ * curtain shows on every load. Plain module (no "use client"): a server layout
+ * can call it.
+ *   // Next (app/layout):
+ *   import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
+ *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ */
+export function curtainHeadScript(storageKey = "cg-curtain") {
+  const k = JSON.stringify(storageKey);
+  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -50,6 +50,7 @@
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
     "./components/Curtain": "./components/Curtain.tsx",
+    "./components/curtainHeadScript": "./components/curtainHeadScript.ts",
     "./components/Lockup": "./components/Lockup.tsx",
     "./tokens/neutral.css": {
       "style": "./tokens/neutral.css",