@breathe-ds/ui 0.6.2 → 0.6.4

package/components/TestimonialCard.tsx

@@ -7,8 +7,9 @@ import { Byline } from "./Byline";
 import { SidePanel } from "./SidePanel";
 
 type Labels = {
-  /** sr-only text of the play button: "Watch: {description}". */
-  watch: (description: string) => string;
+  /** sr-only text of the play button: "Watch: {description}". A function, or a
+   *  string with `{description}` (a string can cross from a server component). */
+  watch: ((description: string) => string) | string;
   /** sr-only after the outbound link. */
   newTab: string;
   /** Button under a clamped quote that opens the whole testimonial. */
@@ -180,6 +181,7 @@ const CLAMP: Record<number, string> = { 3: "line-clamp-3", 4: "line-clamp-4", 5:
 
 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 };
+  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;
   const cardVideo = mediaPlacement === "card" ? video : undefined;
@@ -208,10 +210,13 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
       joiners={joiners}
     />
   );
+  // the whole card opens the panel (stretched link: the button's ::after covers the card);
+  // the video and the source link sit above it (relative z-[1]) and keep their own click
+  const opens = overflows || !!panel;
   return (
-    <Root className={`${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
+    <Root className={`${opens ? "group/card relative" : ""} ${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
       {cardVideo ? (
-        <TapVideo {...cardVideo} label={t.watch(cardVideo.description)} />
+        <TapVideo {...cardVideo} label={watch(cardVideo.description)} frameClass="relative z-[1] aspect-video overflow-hidden bg-ink sm:aspect-auto sm:min-h-[16rem]" />
       ) : cardPhoto ? (
         <div className="relative aspect-[4/3] overflow-hidden bg-tint sm:aspect-auto sm:min-h-[16rem]">
           {cardPhoto.media ?? (
@@ -240,24 +245,24 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
               {quote}
             </blockquote>
           )}
-          {(overflows || panel) && (
+          {opens && (
             <button
               type="button"
               onClick={() => setOpen(true)}
-              className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline decoration-ink/40 underline-offset-4 transition-[text-decoration-color] duration-150 after:absolute after:inset-0 after:rounded-[28px] after:content-[''] group-hover/card:decoration-ink focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-ink motion-reduce:transition-none"
             >
               {video && !cardVideo ? t.watchFull : t.readMore}
             </button>
           )}
         </div>
-        <figcaption>{byline}</figcaption>
+        <figcaption className={link ? "relative z-[1]" : undefined}>{byline}</figcaption>
       </figure>
       {(clampLines || panel) && (
         <SidePanel open={open} onClose={() => setOpen(false)} title={names} labels={{ close: t.close }}>
           <article className="flex flex-col gap-6 px-6 pt-2 pb-10 md:px-8">
             {panel && video ? (
               <div className="overflow-hidden rounded-2xl">
-                <TapVideo {...video} label={t.watch(video.description)} frameClass="relative aspect-video overflow-hidden bg-ink" />
+                <TapVideo {...video} label={watch(video.description)} frameClass="relative aspect-video overflow-hidden bg-ink" />
               </div>
             ) : panel && photo ? (
               <div className="overflow-hidden rounded-2xl bg-tint">

package/components/VideoInviteCard.tsx

@@ -65,8 +65,9 @@ export type VideoInviteCardProps = {
   video?: InviteVideo;
   /** `plain` (default): ink text straight over the video, for footage with a light
    *  wall behind the title. `pill`: the title on a white pill, legible over any
-   *  frame (e.g. when the face reaches the top of the crop). */
-  captionStyle?: "plain" | "pill";
+   *  frame (e.g. when the face reaches the top of the crop). `blur`: no fill, only
+   *  the frosted blur of the video behind, white text with a soft shadow. */
+  captionStyle?: "plain" | "pill" | "blur";
   /** Where the title sits on the idle loop: `top` (default) or `bottom` — when the
    *  face fills the top of the frame. The play circle stays bottom-right. */
   captionAt?: "top" | "bottom";
@@ -99,6 +100,14 @@ function PlayGlyph({ size = 22 }: { size?: number }) {
  * (`rounded-2xl` in the DS scale); the consumer sets aspect/min-height via
  * `className`.
  */
+const CAPTION = {
+  plain: "text-ink [text-shadow:0_1px_2px_rgba(255,255,255,0.5)]",
+  pill: "text-ink rounded-2xl bg-card/90 px-3 py-2 backdrop-blur-sm",
+  // a 20% ink veil under the blur: white measured 5.1–5.5:1 over ttcab's loop
+  // (4.2–4.7:1 with blur alone); the shadow holds it on the lightest frames
+  blur: "text-white rounded-2xl bg-ink/20 px-3 py-2 backdrop-blur-md [text-shadow:0_1px_3px_rgba(0,0,0,0.55)]",
+} as const;
+
 export function VideoInviteCard({ title, description, loop, video, captionStyle = "plain", captionAt = "top", onPlay, onEnded, labels, className = "" }: VideoInviteCardProps) {
   const [inviting, setInviting] = useState(false);
   const t = { ...EN, ...labels };
@@ -108,7 +117,7 @@ export function VideoInviteCard({ title, description, loop, video, captionStyle
      median on the loop, 5.86:1 on the invitation). The light text-shadow
      holds it on the darker frames. */
   const caption = (
-    <p className={`inline-block text-sm font-medium leading-snug text-ink ${captionStyle === "pill" ? "rounded-2xl bg-card/90 px-3 py-2 backdrop-blur-sm" : "[text-shadow:0_1px_2px_rgba(255,255,255,0.5)]"}`}>
+    <p className={`inline-block text-sm font-medium leading-snug ${CAPTION[captionStyle]}`}>
       <span className="block">{title}</span>
       {description && <span className="block font-normal">{description}</span>}
     </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",